选中复选框时展开Div

Question

我有一个复选框：

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

有没有人有一个简单的方法来做到这一点？

Answer 1

选中复选框时会显示该复选框，并在未选中复选框时再次隐藏它：

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

...虽然如果你将DIV指定为id会更好，所以可以更快地选择它：

<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/

如果您想显示div而不再隐藏它，请将.toggle()替换为.show()。

Answer 2

附加change事件，并检查是否选中了复选框。如果选中该复选框，则显示div。否则，隐藏它：

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

在提出这样一个微不足道的问题之前，你还应该看一下jQuery docs。

Answer 3

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

Answer 4

如果您只寻找css解决方案，那么这可以帮助您。

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

}

Fiddle

Answer 5

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

Answer 6

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

Answer 7

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