我已经创建了嵌套的父子复选框。当你选中父复选框时,子复选框会正确显示,但是当你取消选中任何父复选框时,它会隐藏所有的复选框。
这里是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()