Javascript 使用嵌套复选框进行级联检查

我试图在带有复选框的嵌套列表上实现级联检查

我用的是从作为向导

我在处理给定节点的父节点的选中/取消选中时遇到问题。我可以检查所有的父母，但只取消检查第一个，我不知道我做错了什么

HTML

---

FIDDLE:

问题在于$this.parentsul.preva.findinput:checkbox语句从上到下遍历dom，即从最上面的ul到最下面的ul。相反，您需要这样做，才能取消选中所有父复选框。反转从$this.parentsul.preva.findinput:checkbox获得的jquery对象，并使用每个循环，获得所需的结果

您包含的示例使用的是prev，它从下到上遍历，而您使用的是find，它从上到下遍历

将代码更改为如下方式工作：

jQuery.fn.reverse=[].reverse； $input:checkbox.clickfunction { var isChecked=$this.is:checked； //向下 $this.parent.next.findinput:checkbox.propchecked，isChecked； //向上 $this.parentsul.preva.findinput:checkbox.reverse.eachFunction a，b{ $b.0，功能已检查 { 返回$b.parenta.nextul.find:checked.length； }; }; };

---

谢谢你，伙计！一个问题：如果我链接的答案没有做相反的技巧，它是如何工作的？区别在于你使用的是find，它从上到下遍历。该示例使用从下到上遍历的prev。嘿，如果答案对你有用，请把它标记为正确。

<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>

$("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;
    });
});