0 
    <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コードを前提として、「ジーンズ」（上から3番目の入力id = "category_127"）をクリックするとします。親（デニムと衣類）のすべての入力のチェックを外したいと思います。ジーンズのきょうだいはそのままにしておきたいです。jQueryを使用してそれを行うにはどうすればよいですか？ネストされた入力は無数にあります。

ありがとうございました！

4

1 に答える 1

0

このコードを試してください：

$(":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」のチェックが外されている場合、「Clothes」のチェックは外されません。

デモ：http： //jsfiddle.net/6EDw4/1/

于 2012-05-09T17:49:24.993 に答える