When Checkbox is Checked Expand Div

Question

I have a checkbox:

This content should app         


        
                      

              相关标签:
       
      

Answer 1

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().

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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