使用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>我看不出哪里错了；大概我的选择器是错误的，但我已经玩弄了很长时间的语法，但什么也没得到。提前感谢(感谢您阅读了这篇文章)。
回答 2
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用户
发布于 2010-12-16 23:30:20
你知道你可以在自己的领域里滚动，对吧？最典型的方法是使用"rel=“字段，该字段在HTML语言中没有意义，但可以在jquery中提取和使用。
if ($('#contact :checkbox').is(':checked')) {
$("#" + $('#contact :checkbox').attr('rel')).show();
} else {
$("#" + $('#contact :checkbox').attr('rel')).hide();
}然后：
<li><label class="trigger"><input type="checkbox" name="04" rel="hidden-04" /> Trigger 2</label>
<ul class="hidden" id="hidden-04">
<li><label><input type="checkbox" name="04-sub1" /> Normal</label></li>
<li><label><input type="checkbox" name="04-sub2" /> Normal</label></li>
</ul>
</li>因此，当名为04的复选框被选中时，我们在其rel字段中查找hide()或show()对象的id。我认为这比试图遍历dom来找到目标对象要容易得多。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4462321
复制相关文章
相似问题
腾讯云开发者
