当复选框被选中时，展开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>

有没有简单的方法来实现这个？

- Satch3000

---

请停止写感谢和标签 - 特别是愚蠢的标签！ - Lightness Races in Orbit

http://stackoverflow.com/search?q=javascript+toggle - c69

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而不再隐藏它，请使用.show()替换.toggle()。

- Blazemonger

---

因为我没有使用 $(document).ready。如果你使用了，那么它就不会出现这种情况。 - Blazemonger

你如何修复我在这个函数中遇到的问题？如果我开始时 div 是可见的，勾选复选框会使 div 消失，取消勾选则会再次出现。 - rlab

这就是.toggle()的作用，没错。如果你希望它反映复选框的确切状态（选中=可见，未选中=隐藏），尝试使用：$('#mycheckboxdiv').toggle($(this).is(':checked')); 并确保初始状态匹配。 - Blazemonger

请回答这个问题！您如何使此方法适用于多个复选框？ - MaxwellLynn

任何人都可以尝试一下这个链接：https://dev59.com/gGMl5IYBdhLWcg3wkXlx#18307407，对我来说效果很好，希望能帮到你。 - Shaiju T

Answer 2

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

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

在提出这样一个琐碎的问题之前，您还应该查看jQuery文档。

- Rob W

Answer 3

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

- jrummell

Answer 4

如果您只需要 CSS 解决方案，那么这可以帮助您。

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

}

小提琴

- vijayscode

Answer 5

我已经让它正常工作了

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

- Spinstaz

Answer 6

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

- jessegavin

Answer 7

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

- Manuel van Rijn

Answer 8

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

- L3viathan