如何使用复选框显示/隐藏HTML元素

Question

我试图创建一个默认情况下为电子商务网站选中的复选框，我想在复选框未选中时显示div。并在复选框被选中时隐藏div。

My Fiddle: http://jsfiddle.net/ScnQT/3161/ 

Answer 1

您可以检查是否checkbox检查使用$(this).prop('checked')

如果选中$(this).prop('checked')回报true其他false

更多细节here

更新fiddle

$('.shipping_address_details').hide(); 
 
$('#checkedforShippingAddress').change(function(){ 
 
\t \t 
 
    if($(this).prop('checked')){ 
 
     $('.shipping_address_details').hide(); 
 
    }else{ 
 
     $('.shipping_address_details').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <p> 
 
         <input type="checkbox" name="shipping_address" checked="checked" id="checkedforShippingAddress"> 
 
         <span>Ship to the same address</span> 
 
        </p> 
 
        <div class="shipping_address_details"> 
 
         <br/> 
 
         <h3>Shipping Address</h3> 
 
         <p class="form-row form-row form-row-first "> 
 
         <label>First Name <abbr class="required" title="required">*</abbr></label> 
 
         <input type="text" class="input-text " name="billing_first_name" > 
 
         </p> 
 
         <p class="form-row form-row form-row-last " > 
 
         <label>Last Name <abbr class="required" title="required">*</abbr></label> 
 
         <input type="text" class="input-text " > 
 
         </p> 
 
         <div class="clear"></div> 
 
         <p class="form-row form-row form-row-first" > 
 
         <label>Email Address <abbr class="required" title="required">*</abbr></label> 
 
         <input type="email" class="input-text "> 
 
         </p> 
 
         <p class="form-row form-row form-row-last" > 
 
         <label>Postal Code <abbr class="required" title="required">*</abbr></label> 
 
         <input type="tel" class="input-text "> 
 
         </p> 
 
         <p class="form-row form-row form-row-first" > 
 
         <label>State <abbr class="required" title="required">*</abbr></label> 
 
         <input type="email" class="input-text "> 
 
         </p> 
 
         <p class="form-row form-row form-row-last" > 
 
         <label>City <abbr class="required" title="required">*</abbr></label> 
 
         <input type="tel" class="input-text "> 
 
         </p> 
 
         <div class="clear"></div> 
 
         <p class="form-row form-row form-row-wide" > 
 
         <label>Address <abbr class="required" title="required">*</abbr></label> 
 
         <input type="text" class="input-text"> 
 
         </p> 
 
         <p class="form-row form-row form-row-wide address-field"> 
 
         <input type="text" class="input-text"> 
 
         </p> 
 
        </div><!-- shipping address container ends --> 
 
</form>

Answer 2

$('.shipping_address_details').hide(); 
 
$('#checkedforShippingAddress').change(function(){ 
 
    if($(this).prop('checked')){ 
 
     $('.shipping_address_details').hide(); 
 
    } 
 
    else if(!$(this).prop('checked')){ 
 
     $('.shipping_address_details').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <p> 
 
         <input type="checkbox" name="shipping_address" checked="checked" id="checkedforShippingAddress"> 
 
         <span>Ship to the same address</span> 
 
        </p> 
 
        <div class="shipping_address_details"> 
 
         <br/> 
 
         <h3>Shipping Address</h3> 
 
         <p class="form-row form-row form-row-first "> 
 
         <label>First Name <abbr class="required" title="required">*</abbr></label> 
 
         <input type="text" class="input-text " name="billing_first_name" > 
 
         </p> 
 
         <p class="form-row form-row form-row-last " > 
 
         <label>Last Name <abbr class="required" title="required">*</abbr></label> 
 
         <input type="text" class="input-text " > 
 
         </p> 
 
         <div class="clear"></div> 
 
         <p class="form-row form-row form-row-first" > 
 
         <label>Email Address <abbr class="required" title="required">*</abbr></label> 
 
         <input type="email" class="input-text "> 
 
         </p> 
 
         <p class="form-row form-row form-row-last" > 
 
         <label>Postal Code <abbr class="required" title="required">*</abbr></label> 
 
         <input type="tel" class="input-text "> 
 
         </p> 
 
         <p class="form-row form-row form-row-first" > 
 
         <label>State <abbr class="required" title="required">*</abbr></label> 
 
         <input type="email" class="input-text "> 
 
         </p> 
 
         <p class="form-row form-row form-row-last" > 
 
         <label>City <abbr class="required" title="required">*</abbr></label> 
 
         <input type="tel" class="input-text "> 
 
         </p> 
 
         <div class="clear"></div> 
 
         <p class="form-row form-row form-row-wide" > 
 
         <label>Address <abbr class="required" title="required">*</abbr></label> 
 
         <input type="text" class="input-text"> 
 
         </p> 
 
         <p class="form-row form-row form-row-wide address-field"> 
 
         <input type="text" class="input-text"> 
 
         </p> 
 
        </div><!-- shipping address container ends --> 
 
</form>

Answer 3

你拨弄几乎是正确的，但你有一个小错误。这里有一个工作小提琴： http://jsfiddle.net/3ku3me4o/

您需要if($(this).prop('checked') === true)而不是if($(this).prop('checked', true)。后者将“checked”属性设置为true，而不是测试它是否属实。

Answer 4

https://jsfiddle.net/ScnQT/3165/

虽然可以使用.prop。如果我没错的话。 .prop应该用于设置属性，而不是检查它们。

if($(this).is(':checked')){} 

应该解决你的问题。

Answer 5

$('.shipping_address_details').hide(); 
$('#checkedforShippingAddress').click(function(){ 
    if($(this).is(":checked")) 
    $('.shipping_address_details').hide(); 
    else 
    $('.shipping_address_details').show(); 
}) 

Fiddle