我正在尝试在带有复选框的嵌套列表上实现级联检查。
我正在使用this answer中的ᾠῗᵲᄐᶌ作为指南。
我在处理给定节点的父节点的检查/取消选中时遇到问题。我可以检查所有的父母，但只检查第一个，我无法弄清楚我做错了什么。
HTML
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A2</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b2</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE B</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2b</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JS
$("input:checkbox").click(function()
{
var isChecked = $(this).is(":checked");
//down
$(this).parent().next().find("input:checkbox").prop("checked", isChecked);
//up
$(this).parents("ul").prev("a").find("input:checkbox").prop("checked", function()
{
return $(this).parent("a").next("ul").find(":checked").length;
});
});
答案 0 :(得分：1)
问题是声明$(this).parents("ul").prev("a").find("input:checkbox")从上到下遍历dom，即从最顶端到最低点。您需要反向操作，以取消选中所有父复选框。
反转从$(this).parents("ul").prev("a").find("input:checkbox")获得的jquery对象并使用each循环，获得所需的结果。
您所使用的示例使用prev使用find从下到上遍历，而您正在使用从上到下遍历的jQuery.fn.reverse = [].reverse;
$("input:checkbox").click(function()
{
var isChecked = $(this).is(":checked");
//down
$(this).parent().next().find("input:checkbox").prop("checked", isChecked);
//up
$(this).parents("ul").prev("a").find("input:checkbox").reverse().each(function(a, b) {
$(b).prop("checked", function()
{
return $(b).parent("a").next("ul").find(":checked").length;
});
});
});
将您的代码更改为以下内容：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A2</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b2</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE B</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2b</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul> <select name="selection" id="selection" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
$(document).ready(function() {
$("#selection").change(function(){
$('#desc').val(this.value);
});
});