选中/取消选中父母和孩子

Posted 2023-05-08

【中文标题】选中/取消选中父母和孩子

【英文标题】：Check/uncheck parents and children

【发布时间】：2010-09-14 14:03:02

【问题描述】：

你能写出更好的代码吗？我需要根据父母检查/取消选中所有孩子，当检查孩子时，检查父母，当所有孩子都未选中时，取消选中父母。

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

【参考方案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
    );
);

【讨论】：

做“.siblings(...).siblings(...)”有什么意义？另外：“$(this).parent().children(...)”可能只是“.siblings(...)”

nickf: 哎呀，看看你有没有注意 :) - 实际上，我只是从 Zote 的代码（var childs line）中复制了它 - 我已经清理了更多（+1）跨度>

【参考方案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.
        )
    ;
);

更新：我刚刚对此进行了测试，它完全有效（哇！）。它还可以根据需要使用任意多级的嵌套，而不仅仅是两级。

【参考方案3】：

这是一个可爱的小线程，它让我几乎到达了我需要的地方。我稍微修改了 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..道歉。

【参考方案4】：

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

终极。