How to show/hide HTML elements with checkboxes

Question

I was trying to create a checkbox checked by default for an ecommerce website, I want to show the div when the checkbox is unchecked. and hide the div when the checkbox is checked.

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

Answer 1

You can check whether checkbox is checked using $(this).prop('checked')

if checked $(this).prop('checked') returns true else false

for more details here

Updated 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

 $('.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

Your fiddle is almost right, but you have a small error. Here's a working fiddle: http://jsfiddle.net/3ku3me4o/

You need if($(this).prop('checked') === true) rather than if($(this).prop('checked', true) . The latter is setting the "checked" property to be true rather than testing if it's true.

Answer 4

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

Although you can use .prop. If i'm not mistaken. .prop should be used for setting attributes, over checking them.

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

Should solve your problem.

Answer 5

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

Fiddle