jQuery选择所有子复选框答案

【问题标题】：jQuery selecting all child checkboxesjQuery选择所有子复选框
【发布时间】：2013-01-29 00:00:05
【问题描述】：

首先，我只想说我对 jQuery 毫无希望。

我正在查看此处帖子中的一些代码，它选择了每个父复选框（并且有效）：

$(function() {
  $(":checkbox").change(function () {
    $(this).parents().children(':checkbox').attr('checked', this.checked);
  });
});

我们有一个使用<ul> <li> 的树视图结构，每个<li> 都有一个复选框。我想做与上述相反的操作，并对所有子复选框执行相同的复选框选择。

任何人都可以修改上述内容吗？

请注意，我们使用的是 razor，每个复选框都是一个 @Html.CheckboxFor，因此输出如下：

<input name="Survey.Buildings[0].IsSelected" type="checkbox" value="true" checked="checked" data-val="true" data-val-required="The Selected? field is required." id="Survey_Buildings_0__IsSelected" />
<input name="Survey.Buildings[0].IsSelected" type="hidden" value="false" />

编辑 2：

好的，我已经修复了 HTML，结构现在看起来像：

<ul>
    <li> Cbx1
        <ul>
            <li> Cbx 2 </li>
        </ul>
    </li>
    <li> Cbx3 </li>
    <li> Cbx4   
        <ul>
            <li> Cbx 5 </li>
            <li> Cbx 6 </li>
        </ul>
    </li>
</ul>

因此，如果 Cbx4 被选中，则 Cbx5 和 6 将被选中，如果未选中，则它们将被取消选中

非常感谢

安迪

【问题讨论】：

您必须提供一些特定的 HTML sn-p，并准确描述当某个框发生变化时应检查哪些框。
如果选中 Cbx2 什么都不会发生，我只想切换子复选框。所以 cbx1 会切换 cbx2 而不是相反，而 cbx4 会切换 cbx5 和 6。

标签： jquery

【解决方案1】：

我的解决方案既独特又简单

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
    <input type="checkbox" id="chk1" class="" onclick="toggleCheckBox(this.id)"> Parent 1 check all
    <br>
    <input type="checkbox" id="choice2" class="chk1"> <br>
    <input type="checkbox" id="choice3" class="chk1"> <br>
    <input type="checkbox" id="choice_1" class="chk1">
    <br>
    <h1> test 2 </h1>
    <input type="checkbox" id="chk2" class="" onclick="toggleCheckBox(this.id)"> Parent 2 check all
    <br>
    <input type="checkbox"  class="chk2">
    <br>
    <h1> test 3 </h1>
    <input type="checkbox" id="chk3" class="" onclick="toggleCheckBox(this.id)"> Parent 3 check all
    <br>
    <input type="checkbox"  class="chk3">
</div>

<script>
        function toggleCheckBox(id) {
            $('#'+id+'').on('change', function() {
                $(this).nextAll('.'+id+'').prop('checked', this.checked);
            });
        }

        //toggleCheckBox('chk1');

</script>
</body>
</html>

【讨论】：

【解决方案2】：

jsFiddle Demo

$(function() {
  $("input[type='checkbox']").change(function () {
    $(this).siblings('ul')
           .find("input[type='checkbox']")
           .prop('checked', this.checked);
  });
});

【讨论】：

Problem is that on your jsfiddle example when 3 is selected, 4 is selected and it is not a child of 3. So in the example on my post when Cbx3 is selected nothing else would be affected as it没有孩子李的
我明白了，5 和 6 应该存在于同一个 LI 中，这可能是我的问题，我将修改我的 HTML，您的示例是否有效？
我更新了我的帖子以反映 HTML 现在的外观。如您所见，CBx5 和 CBX6 现在是 CBX4 列表中的子列表。这有意义吗？

【解决方案3】：

$(function() {
  $(":checkbox").change(function () {
    $(this).children(':checkbox').attr('checked', this.checked);
  });
});

您的问题不是很清楚，但您可以通过删除 parent() 重试，如上所示。

【讨论】：