jQuery选择所有子复选框 [英] jQuery selecting all child checkboxes

问题描述

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

Firstly, just wanted to say I am hopeless with jQuery.

我正在查看此处的帖子中的一些代码，该代码选中了每个父复选框(并起作用):

I was looking at some code from a post on here which selects each parent checkbox (and works):

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

我们有一个使用< ul>< li> 和每个< li> 都有一个复选框.我要执行与上述相反的操作，并在所有子复选框上执行相同的复选框选择.

We have a tree view structure using <ul> <li> and each <li> has a checkbox. I want to do the opposite of the above and perform the same checkbox selection on all child checkboxes.

任何人都可以修改以上内容来做到这一点吗?

Can anyone modify the above to do that?

请注意，我们使用的是剃刀，每个复选框都是@ Html.CheckboxFor，因此输出内容如下:

Just to note we are using razor and each checkbox is a @Html.CheckboxFor so the output is along the lines of:

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

好，我已经修复了HTML，现在的结构如下:

OK I have fixed the HTML and the structure now looks like:

<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将被选中，如果未选中，则它们也将未被选中

So if Cbx4 was checked Cbx5 and 6 would be checked, and if it was unchecked they would be unchecked

非常感谢

安迪

推荐答案

jsFiddle演示

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

这篇关于jQuery选择所有子复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！