gpt4 book ai didi

javascript - 使用 JQuery 检查单击父复选框时的所有直接子复选框

转载 作者:搜寻专家 更新时间:2023-10-31 22:44:07 25 4
gpt4 key购买 nike

我的 html 代码中有一个列表,其中单击父复选框时,应选中直接子复选框。

<ul class="test_ex">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Fruits</a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Apple </a>
</li>
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Orange </a>
</li>
</ul>
<ul class="test_ex_sample">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Birds</a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Peacock </a>
</li>
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref">Parrot </a>
</li>
</ul>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref"> Food </a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref">Bread </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

我尝试了很多方法来只检查直接 child 。但他们都没有工作。这些是几种方法:

  • 尝试使用 .siblings() [仅在 stackoverflow 上找到此解决方案]

    function fnTest(check) {

    if ($(check).is(':checked')) {
    $(check).siblings('.example').find('.child').attr("checked", true);
    } else {
    $(check).siblings('.example').find('.child').attr("checked", false);
    }
    }

Fiddle demo 1

这里第一个列表工作正常。再次单击第二个列表时,它也会检查第三个列表的子项。

  • 第二次尝试了这套代码尝试使用已检查的类(class)并从该类(class)中获取 child 。这会检查属于该类(class)的所有 parent 。

Fiddle demo 2

function fnTest(check) {
if ($(check).is(':checked')) {
var classParent = "." + $(check).attr('class');
$(classParent).attr("checked", true);
}
}

如果有人能指出我的错误就太好了。

最佳答案

从您第一次尝试使用 siblings() 开始。您可以更改为以下内容:

function fnTest(check){

if($(check).is(':checked')){
$(check).siblings('.example:first').find('.child').prop("checked",true);
}
else{
$(check).siblings('.example:first').find('.child').prop("checked",false);
}
}

通过使用它,它只检查第一个 child 。并将您的 .attr 更改为 .prop

这是一个演示:Fiddle

关于javascript - 使用 JQuery 检查单击父复选框时的所有直接子复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25156382/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com