jQuery父子复选框没有正确隐藏
jQuery parent-child check-boxes not hide properly
我已经创建了嵌套的父子复选框。当你选中父复选框时,子复选框会正确显示,但是当你取消选中任何父复选框时,它会隐藏所有的复选框。
这里是jQuery代码在JS提琴:http://jsfiddle.net/6296B/
跟踪问题请遵循以下步骤:
- 检查到100
- 然后检查120
- 然后检查123
- 然后取消选中123
您将自动获得问题。
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$(".checkbox-container input[type='checkbox']").change(function()
{
if ($(this).is(':checked'))
{
$(this).parents("li").children("ul").show(600);
}
else { $(this).parents("li").children("ul").hide(600); }
});
});
</script>
<style>
.checkbox-container {}
.checkbox-container label { display: block; }
.checkbox-container ul {}
.checkbox-container ul ul { list-style: none; display: none; }
.checkbox-container ul { list-style: none; display: block; }
.checkbox-container input[type="checkbox"] {}
</style>
<div class="checkbox-container">
<ul>
<li class="first">
<input type="checkbox" name="100" value="100" >100
<ul>
<li><input type="checkbox" name="110" value="110" >110</li>
<li><input type="checkbox" name="120" value="120" >120
<ul>
<li><input type="checkbox" name="121" value="121" >121</li>
<li><input type="checkbox" name="122" value="122" >122</li>
<li><input type="checkbox" name="123" value="123" >123
<ul>
<li><input type="checkbox" name="1230" value="1230" >1230</li>
<li><input type="checkbox" name="1231" value="1231" >1231</li>
<li><input type="checkbox" name="1232" value="1231" >1231</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
尝试使用.parent()
代替.parents()
应该是parent()
而不是parents()
:
$(document).ready(function () {
$(".checkbox-container input[type='checkbox']").change(function () {
if ($(this).is(':checked')) {
$(this).parent("li").children("ul").show(600);
} else {
$(this).parent("li").children("ul").hide(600);
}
});
});
工作演示
你可以使用.siblings()
- Reference来获取<ul>
$(document).ready(function () {
$(document).ready(function () {
$(".checkbox-container input[type='checkbox']").change(function () {
if ($(this).is(':checked')) {
$(this).siblings("ul").show(600);
} else {
$(this).siblings("ul").hide(600);
}
});
});
});
其他替代:.next()
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 显示5秒后隐藏潜水
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 浮动页脚栏-使用Bootstrap隐藏
- 在jquery中为显示/隐藏设置cookie
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 从var向代码隐藏函数传递值
- Image赢得't隐藏在滚动jQuery上
- 具有rowGrouping的数据表无法隐藏列
- Jquery隐藏未触发
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 分部隐藏在jquery中不起作用
- 点击后隐藏潜水?(但如果Div是一面旗帜呢?)
- javascript.点击隐藏事件故障
- 禁用(而不是隐藏)浏览器滚动条
- PHP Javascript显示/隐藏按钮不工作
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- jQuery父子复选框没有正确隐藏
- 显示/隐藏非父子元素时,悬停不起作用