When Checkbox is Checked Expand Div

Question

I have a checkbox:

<input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" />
<div style="display:none">
This content should appear when the checkbox is checked
</div>

Does anyone have a simple way to do this?

Please stop writing thanks and tags -- especially silly ones! — Lightness Races in Orbit, Nov 03 '11 at 14:15

score 21 · Accepted Answer · answered Nov 03 '11 at 14:11

21

This will show it when the checkbox is checked, and hide it again when the checkbox is unchecked:

$('#mycheckbox').change(function() {
    $(this).next('div').toggle();
});

...although it would be better if you'd assign that DIV an id, so it could be selected more quickly:

<input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" />
<div id="mycheckboxdiv" style="display:none">
    This content should appear when the checkbox is checked
</div>

<script type="text/javascript">
$('#mycheckbox').change(function() {
    $('#mycheckboxdiv').toggle();
});
</script>

http://jsfiddle.net/mblase75/pTA3Y/

If you want to show the div without hiding it again, replace .toggle() with .show().

answered Nov 03 '11 at 14:11

Blazemonger

90,923
26
142
180

Why does the script have to be after the content? – rlab Apr 16 '13 at 18:56
1

Because I didn't use `$(document).ready`. If you do, then it doesn't. – Blazemonger Apr 16 '13 at 18:56
How would you fix the problem I have with this function? If I start with div visible, checking the checkbox makes div disappear and unchecking makes it appear again. – rlab Apr 16 '13 at 19:23
This isn't a JS issue. Either start with the div hidden, or start with the box checked. – Blazemonger Apr 16 '13 at 19:55
So the script doesn't actually see the checkbox state? It just notices the change? – rlab Apr 16 '13 at 20:47
1

That's what `.toggle()` does, yes. If you want it to reflect the checkbox's exact state (checked=visible, unchecked=hidden), try: `$('#mycheckboxdiv').toggle($(this).is(':checked'));` and make sure the initial states match. – Blazemonger Apr 16 '13 at 21:24
Please answer this! How can you make this method work with more than one checkbox? – MaxwellLynn Jul 28 '13 at 16:53
anyone can give a try to [this](http://stackoverflow.com/a/18307407/2218697) too, it worked fine for me, hope helps. – Shaiju T Apr 13 '15 at 12:15

score 6 · Answer 2 · answered Nov 03 '11 at 14:11

Attach a change event, and check whether a checkbox is checked or not. If the checkbox is checked, show the div. Otherwise, hide it:

$('#mycheckbox').change(function(){
    if(this.checked) {
        $(this).next().show();
    } else {
        $(this).next().hide();
    }
});

You should also have a look at the jQuery docs, before asking such a trivial question.

score 3 · Answer 3 · answered Nov 03 '11 at 14:11

3

$("#mycheckbox").change(function(){ 
    $(this).next().toggle(this.checked); 
});

answered Nov 03 '11 at 14:11

jrummell

42,637
17
112
171

score 1 · Answer 4 · answered Dec 25 '16 at 08:11

1

If you are looking for only css solution, then this can help you.

#toggle-content{
display:none;
}
#mycheckbox:checked ~ #toggle-content{
  display:block;
  height:100px;

}

Fiddle

answered Dec 25 '16 at 08:11

vijayscode

1,905
4
21
37

Spinstaz · Answer 5 · 2021-11-26T13:34:36.887

0

I got it working with

  $(document).on('ready',function() {
    $('#checkbox').on('change',function(){
        if(this.checked) {
            console.log("checked");
        } else {
            console.log("unchecked");
        }
    })
});

edited Nov 26 '21 at 13:34

answered Nov 26 '21 at 11:39

Spinstaz

287
6
12

score 0 · Answer 6 · answered Nov 03 '11 at 14:11

0

$("#mycheckbox").click(function() { $(this).next("div").toggle() })

answered Nov 03 '11 at 14:11

jessegavin

74,067
28
136
164

score 0 · Answer 7 · answered Nov 03 '11 at 14:11

0

$("input#mycheckbox").click(function() {
    if($(this).is(":checked") {
        $("div").slideDown();
    }
    else {
        $("div").slideUp();
    }
})

answered Nov 03 '11 at 14:11

Manuel van Rijn

10,170
1
29
52

score 0 · Answer 8 · answered Nov 03 '11 at 14:12

0

if ($("#mycheckbox").checked) {
   $("div").style.display = "block";
}

answered Nov 03 '11 at 14:12

L3viathan

26,748
2
58
81

When Checkbox is Checked Expand Div

8 Answers8

Linked