使用jQuery根据复选框显示/隐藏div
使用jQuery根据复选框显示/隐藏div
提问于 2010-12-16 23:19:39
我有一个带有复选框的表单(包含在标签#contact中)。对于此复选框的更改操作，我显示/隐藏了一个div (#options)。
为了确保选中复选框时，始终显示#options div (并且避免选中复选框实际上隐藏subjequent选项的情况)，我使用以下代码：
$('#contact :checkbox').is(':checked') ? $("#options").show() : $("#options").hide();这可以很好地工作。我遇到的问题是，我希望有多个复选框，而不是只有一个带有ID的复选框。我希望根据前一个复选框(在带有类.trigger的标签内)是否被选中来显示/隐藏我的.hidden类的下一个实例。我已经尝试过了：
$(document).ready(function() {
if( $('.trigger :checkbox').is(':checked') ) {
$(this).parent().nextAll('ul.hidden').show();
} else {
$(this).parent().nextAll('ul.hidden').hide();
}
});但无济于事。复选框在一个无序列表中，如下所示：
<ul>
<li><label class="trigger"><input type="checkbox" name="02" /> Trigger 1</label>
<ul class="hidden">
<li><label><input type="checkbox" name="02-sub1" /> Normal</label></li>
<li><label><input type="checkbox" name="02-sub2" /> Normal</label></li>
</ul>
</li>
<li><label><input type="checkbox" name="02" /> Normal</label></li>
<li><label><input type="checkbox" name="03" /> Normal</label></li>
<li><label class="trigger"><input type="checkbox" name="04" /> Trigger 2</label>
<ul class="hidden">
<li><label><input type="checkbox" name="04-sub1" /> Normal</label></li>
<li><label><input type="checkbox" name="04-sub2" /> Normal</label></li>
</ul>
</li>
</ul>我看不出哪里错了；大概我的选择器是错误的，但我已经玩弄了很长时间的语法，但什么也没得到。提前感谢(感谢您阅读了这篇文章)。
Stack Overflow用户
回答已采纳
发布于 2010-12-16 23:32:49
您需要在change处理程序中运行代码，因此this引用您想要的复选框，如下所示：
$(document).ready(function() {
$('.trigger :checkbox').change(function() {
if( $(this).is(':checked') ) {
$(this).parent().nextAll('ul.hidden').show();
} else {
$(this).parent().nextAll('ul.hidden').hide();
}
});
});可以用.toggle(bool)缩短的...and，如下所示：
$(function() {
$('.trigger :checkbox').change(function() {
$(this).parent().nextAll('ul.hidden').toggle(this.checked);
});
});如果您需要它在页面加载时运行，以便显示/隐藏状态与复选框匹配，只需使用.change() (.trigger('change')的快捷方式)调用该change处理程序，如下所示：
$(function() {
$('.trigger :checkbox').change(function() {
$(this).parent().nextAll('ul.hidden').toggle(this.checked);
}).change();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4462321
复制相关文章
相似问题
腾讯云开发者
