Question

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

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

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

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

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

请注意我们正在使用剃须刀，每个复选框都是@ 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，如果未选中，则会取消选中

非常感谢

安迪

Answer 1

jsFiddle Demo

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

Answer 2

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

您的问题不是很清楚，但您可以通过删除上面显示的parent（）来重试。

Answer 3

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

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

jQuery选择所有子复选框

3 个答案: