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代码，假设我点击'Jeans'（顶部的第三个输入，id =“category_127”）。我想取消其父母的所有输入（牛仔布和服装）。我想留下牛仔裤的兄弟姐妹。我怎么能用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);
            }
        });
    }
});

仅当并行类别中没有选中元素时，才会取消选中父级复选框。例如，如果选中“Trousers”和/或“Bermudas”并取消选中“Jeans”，则“衣服”将不会被取消选中。

DEMO： http://jsfiddle.net/6EDw4/1/

遍历ul父项并使用jQuery取消选中复选框

1 个答案: