如何使用複選框顯示/隱藏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