CODEWITHSUNDEEP
javascriptjquery
Daniel
Daniel

Reputation: 1466

How to show/hide HTML elements with checkboxes

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/

Upvotes: 0

Views: 225

Answers (5)

vijayscode
vijayscode

Reputation: 2015

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

Fiddle

Upvotes: 0

Andrew Ice
Andrew Ice

Reputation: 841

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.

Upvotes: 0

Tim Gupta
Tim Gupta

Reputation: 104

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.

Upvotes: 1

fingerpich
fingerpich

Reputation: 9330

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

Upvotes: 1

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10282

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>

Upvotes: 1

Related Questions