使用 JQuery 检查所有直接子复选框 onclicking parent checkbox答案

【问题标题】：Checking all immediate child checkboxes onclicking parent checkbox using JQuery使用 JQuery 检查所有直接子复选框 onclicking parent checkbox
【发布时间】：2014-08-06 09:11:28
【问题描述】：

我的 html 代码中有一个列表，其中 onclick 父复选框，应选中直接子复选框。

<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>

我尝试了很多方法来只检查直系孩子。但他们都没有工作。这些是几种方法：

尝试使用 .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

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

第二次尝试了这组代码尝试使用已检查的课程并从该课程中获取孩子。这会检查属于该班级的所有父母。

Fiddle demo 2

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

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

【问题讨论】：

你应该有元素的唯一ID。

标签： javascript jquery html checkbox

【解决方案1】：

从您第一次尝试使用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);        
    }
      }

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

这是一个演示：Fiddle

【讨论】：

最相关和完美的解决方案。它就像一个魅力。谢谢！

【解决方案2】：

您可以使用 jQuery 来做到这一点。首先从父复选框中删除onchange="fnTest(this);"。为父复选框绑定更改事件，如下所示：

$(function(){
   $('.parent').click(function(){
      $(this).parent().find('.example:first .child').prop('checked',$(this).is(':checked'));
   });
 });

Demo

【讨论】：

我使用绑定事件并尝试过。它不起作用。所以我使用了onchange。小提琴 -jsfiddle.net/5N6TL/34
这行得通！但是第二次就不行了。就像一旦我检查父母然后取消选中它并再次检查它不起作用。
是的，我看到了，为此我使用.attr 更新为.prop。检查更新的答案和链接

【解决方案3】：

试试

 function fnTest(check) {
      $(check).closest("ul").find(":checkbox").prop("checked",check.checked);

}

DEMO

如果你只想直接孩子这样使用

function fnTest(check) {
    $(check).closest("li").find(".example:first").find(":checkbox").prop("checked", check.checked);

}

DEMO

注意：在 jquery 中使用最新版本，并且 id 应该是唯一的

【讨论】：

这会检查所有的复选框。先生，我只想检查直系子女。
@user3201640 你能告诉我这个例子吗

【解决方案4】：

// 正常测试

$(document).ready(function(e) {

$('input[type=checkbox]').click(function () {
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
    var sibs = false;
    $(this).closest('ul').children('li').each(function () {
        if($('input[type=checkbox]', this).is(':checked')) sibs=true;
    })
    $(this).parents('ul').prev().prop('checked', sibs);
});});

【讨论】：