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

Question

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

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

Answer 1

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

如果选中$(this).prop('checked')返回true，否则false

了解更多详情here

已更新fiddle

$('.shipping_address_details').hide();
$('#checkedforShippingAddress').change(function(){
		
    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>