[英]jQuery parent-child check-boxes not hide properly
Thanks for help in advance. 提前感谢您的帮助。
I have created nested parent-child check-boxes. 我创建了嵌套的父子复选框。
when you checked on parent checkbox then child showing properly , 当您选中父复选框时,子项显示正常,
but when you un-checked any parent checkbox it hide all check-boxes. 但是当您取消选中任何父复选框时,它会隐藏所有复选框。
here is jQuery code. 这是jQuery代码。 JS fiddle example http://jsfiddle.net/6296B/
JS小提琴示例http://jsfiddle.net/6296B/
to track issue please follow step : 跟踪问题请按照步骤:
1. checked on 100 1.检查100
2. then checked on 120 2.然后检查120
3. then checked on 123 3.然后检查123
4. then un-check 123 4.然后取消检查123
you will got the issue automaticly 你会自动得到这个问题
<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()
。
It should be parent()
instead of 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);
}
});
});
You can just use .siblings()
- Reference to get the <ul>
你可以使用
.siblings()
- 引用来获取<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);
}
});
});
});
Other alternative : .next()
其他选择:
.next()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.