选中/取消选中父元素和子元素。

Question

你能写出更好的代码吗？我需要根据父级元素来勾选/取消勾选所有子元素，当一个子元素被勾选时，勾选父元素，当所有子元素都未被勾选时，取消勾选父元素。

    $(".parent").children("input").click(function() {
    $(this).parent().siblings("input").attr("checked", this.checked);
});

$(".parent").siblings("input").click(function() {
    if (this.checked) {
        $(this).siblings("div").children("input").attr("checked", true);
        return;
    }

    var childs = $(this).siblings("div").siblings("input");

    for (i = 0; i < childs.length; i++) {
        if ($(childs.get(i)).attr("checked"))
            return;
    }

    $(this).parent().children("div").children("input").attr("checked", false);
});

- Zote

Answer 1

$(".parent").children("input").click(function() {
    $(this).parent().siblings("input").attr("checked", this.checked);
});

$(".parent").siblings("input").click(function() {
    $(this).siblings("div").children("input").attr("checked",
        this.checked || $(this).siblings("input[checked]").length>0
    );
});

- Hafthor

---

做“.siblings(...).siblings(...)”有什么意义？此外：“$(this).parent().children(...)”可以简化为“.siblings(...)”。 - nickf

nickf: 哈哈，看看你是否在关注 :) - 实际上，我只是从 Zote 的代码中复制了那个（var childs line）- 我已经进一步优化它了（+1） - Hafthor

Answer 2

哇，我超级困惑。看起来你的输入框里面还有其他的输入框？这好像没有意义。这是我认为你的结构是什么样子的，让我来试试。

<div class="parent">
    <input type="checkbox" />
    <div>
        <input type="checkbox" />
        <input type="checkbox" />
    </div>
    <input type="checkbox" />
    <div>
        <input type="checkbox" />
        <input type="checkbox" />
    </div>
</div>

这是我会使用的代码。

$("input[type='checkbox']").click(function() {
    // turn on or off all descendants.
    $(this)         // get this checkbox
        // get the div directly after it
        .next('div')
        // get ALL the inputs in that div (not just first level children)
        .find("input[type='checkbox']")
        .attr("checked", this.checked)
    ;

    // now check if we have to turn the parent on or off.
    $(this)
        .parent()  // this will be the div
        .prev('input[type="checkbox"]')  // this is the input
        .attr(
            "checked",     // set checked to true if...
            this.checked   // this one is checked, or...
            || $(this).siblings("input[type='checkbox'][checked]").length > 0
                           // any of the siblings are checked.
        )
    ;
});

更新：我刚刚测试了一下，它完全可行（耶！）。它还可以与您想要的任意嵌套级别一起使用，而不仅仅是两个。

- nickf

Answer 3

$('.parent').click(function(){
    checkBox = $(this).find('input[type=checkbox]');
    checkBox.prop("checked", !checkBox.prop("checked")); // inverse selection
});

终极。

- pirs

Answer 4

这是一个非常好的线程，让我接近我需要的地方。我稍微改编了Nickf的代码。目标是检查子项也会检查父项，取消选中父项也会取消选中所有子项。

$("input[type='checkbox']").click(function() { if (!$(this.checked)) {

$(this) 
    .next('div')
    .find("input[type='checkbox']")
    .attr("checked", this.checked)
;
}


$(this)
    .parent()  
    .prev('input[type="checkbox"]')  
    .attr("checked", this.checked || $(this).siblings("input[type='checkbox'][checked]").length > 0

    )
;

});

如果父级未选中，如何调整以使所有后代都未选中？

新的JQ和JavaScript所有事物..抱歉。

- bulkhead