选中复选框时展开Div [英] When Checkbox is Checked Expand Div

问题描述

我有一个复选框：

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

推荐答案

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

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();
});

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

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

如果你想显示div而不再隐藏它，请替换 .toggle（） .show（）。

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

这篇关于选中复选框时展开Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！