jQuery hide div when checkbox checked, show on unchecked

Question

I am trying to hide div when user clicks on checkbox, and show it when user unchecks that checkbox. HTML:

<div id="autoUpdate" class="autoUpdate">
   content
</div>

jQuery:

<script>
$('#checkbox1').change(function(){
        if (this.checked) {
            $('#autoUpdate').fadeIn('slow');
        }
        else {
            $('#autoUpdate').fadeOut('slow');
        }                   
    });
</script>

I am having a hard time to get this working.

this question maybe help you stackoverflow.com/questions/3312502/… — danywalls
– danywalls, Commented Feb 7, 2013 at 18:01

gdoron · Accepted Answer · 2013-02-07 18:02:03Z

54

Make sure to use the ready event.

Code:

$(document).ready(function(){
    $('#checkbox1').change(function(){
        if(this.checked)
            $('#autoUpdate').fadeIn('slow');
        else
            $('#autoUpdate').fadeOut('slow');

    });
});

answered Feb 7, 2013 at 18:02

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Marr Over a year ago

I believe this has to be the issue, as the code works fine on jsFiddle: jsfiddle.net/mxRCz

user2035638 Over a year ago

I found where I had my problem. <label> tags was causing this issue. <label id="checkbox1"><input type="checkbox" id="checkbox1" checked="checked" /></label> Working if I remove <label> tags. Thank you!

JonSnow Over a year ago

The right way to do it wth label would be: <label for="cbText">Blabla</label> <input type="checkbox" value="" id="cbText" /> so the checkbox has to be outside of the label tag

Ryan Aquino Over a year ago

note: make sure you are hitting the checkbox input id/class

overflow · Accepted Answer · 2014-09-15 11:35:27Z

2

HTML

<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<div id="block">Some text here</div>

css

#block{display:none;background:#eef;padding:10px;text-align:center;}

javascript / jquery

$('#cbxShowHide').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000); //time for show
});

answered Sep 15, 2014 at 11:35

overflow

1458 bronze badges

Collectives™ on Stack Overflow

jQuery hide div when checkbox checked, show on unchecked

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related