jquery - 使用 jQuery 遍历 ul 父级并取消选中复选框

Question

    <ul>
    <li>
        <label for="category_125" class="checkbox">
        <input type="checkbox" checked="checked" name="categories[]" value="125" id="category_125">Clothing</label>
        <ul>
            <li>
                <label for="category_126" class="checkbox">
                <input type="checkbox" name="categories[]" value="126" id="category_126">Denim</label>
                <ul>
                    <li>
                        <label for="category_127" class="checkbox">
                        <input type="checkbox" checked="checked" name="categories[]" value="127" id="category_127">Jeans</label>
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                <label for="category_144" class="checkbox">
                <input type="checkbox" name="categories[]" value="144" id="category_144">Trousers</label>
                <ul>
                    <li>
                        <label for="category_146" class="checkbox">
                        <input type="checkbox" name="categories[]" value="146" id="category_146">Bermudas</label>
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                <label for="category_152" class="checkbox">
                <input type="checkbox" name="categories[]" value="152" id="category_152">Sweaters</label>
                <ul>
                    <li>
                        <label for="category_154" class="checkbox">
                        <input type="checkbox" name="categories[]" value="154" id="category_154">Sweaters</label>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

鉴于上面的 HTML 代码，假设我点击了“牛仔裤”（从顶部开始的第三个输入，id="category_127"）。我想取消选中其父项（Denim 和 Clothing）中的所有输入。我想让牛仔裤的兄弟姐妹保持原样。我怎样才能使用 jQuery 做到这一点？嵌套输入的数量不定。

谢谢！

Answer 1

试试这个代码：

$(":checkbox").on("change", function() {
    var $this = $(this);
    var checked = $this.prop("checked");
    if (!checked) {
        $this.parent().siblings("ul").find(":checkbox:checked").prop("checked", false);
    }

    if ($this.closest("ul").find(":checkbox:checked").not(this).length == 0) {
        $this.parents("ul").each(function() {
            if ($(this).siblings("ul").find(":checkbox:checked").length == 0) {
                $(this).siblings("label").children().prop("checked", checked);
            }
        });
    }
});​

仅当并行类别中没有选中的元素时，它才会取消选中父级的复选框。例如，如果选中“裤子”和/或“百慕大”，而您取消选中“牛仔裤”，则不会取消选中“衣服”。

演示：http: //jsfiddle.net/6EDw4/1/