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(){
		
    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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

您需要if($(this).prop('checked') === true)而不是if($(this).prop('checked', true)。后者正在设置＆＃34;检查＆＃34;属性是真实的，而不是测试它是否真实。

Answer 4

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

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

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

应该解决你的问题。

Answer 5

{{1}}

Fiddle

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

5 个答案: