13

首先，只想说我对 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 将被选中，如果未选中，则它们将被选中

非常感激

安迪

4

3 回答 3

33

jsFiddle 演示

$(function() {
  $("input[type='checkbox']").change(function () {
    $(this).siblings('ul')
           .find("input[type='checkbox']")
           .prop('checked', this.checked);
  });
});
于 2013-02-13T12:36:54.020 回答
0 
$(function() {
  $(":checkbox").change(function () {
    $(this).children(':checkbox').attr('checked', this.checked);
  });
});

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

于 2013-02-13T12:32:17.193 回答
0

我的解决方案独特而简单

<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>
于 2020-12-22T10:56:25.303 回答