选中复选框时展开Div [英] When Checkbox is Checked Expand Div
本文介绍了选中复选框时展开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屋!
查看全文