Jquery 更改数组中的复选框

这是一个带有嵌套GridView的asp.net webforms页面

我有一个表，可以在每行下动态添加多个“详细信息”表。 明细表的标题中有一个“全选”复选框，下面的每一行都有一个复选框

选中“标题级别”复选框时，我尝试选中所有子行复选框

<div>
<table class="details">
    <tbody>
        <tr style="white-space:nowrap;">
            <th scope="col">
                <span class="ckbSelectAll">
                    <input type="checkbox" />
                </span>
            </th>
            <th scope="col">number</th>
            <th scope="col">Status</th>
        </tr>
        <tr>
            <td>
                <span class="ckbResults">
                    <input type="checkbox" />
                </span>
            </td>
            <td>121223</td>
            <td>Open</td>
        </tr>
    </tbody>
</table>

---

我想可能是.change，我尝试了.on（'change'，function（）和.on（'click'，function（）），但无法通过单击或更改触发警报。

这最好使用

.each（）

和

.prop（）

工作示例：

HTML

<table class="details">
  <thead>
    <tr style="white-space:nowrap;">
      <th scope="col">
        <span class="ckbSelectAll">
        <input type="checkbox" />
        </span>
      </th>
      <th scope="col">number</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="ckbResults">
        <input type="checkbox" />
        </span>
      </td>
      <td>112233</td>
      <td>Open</td>
    </tr>
    <tr>
      <td>
        <span class="ckbResults">
        <input type="checkbox" />
        </span>
      </td>
      <td>112234</td>
      <td>Open</td>
    </tr>
    <tr>
      <td>
        <span class="ckbResults">
        <input type="checkbox" />
        </span>
      </td>
      <td>112235</td>
      <td>Open</td>
    </tr>
  </tbody>
</table>

更新

对于多个表，我建议如下：

$(function() {
  $(".ckbSelectAll input").change(function() {
    var checked = $(this).is(":checked");
    var parentTable = $(this).closest("table");
    parentTable.find(".ckbResults input").each(function(index, elem) {
      $(elem).prop("checked", checked);
    });
  });
});

---

单击特定标题中的复选框时，该表中的关联复选框将被选中或取消选中。

即使同一页面中有多个表，也可以使用以下代码，只需确保

主复选框

具有

ckbSelectAll

类：

$('.ckbSelectAll > input').on('change', function(){
    var $this = $(this);
    $this.closest('thead')
        .next()
        .find('input[type=checkbox]')
        .prop('checked', $this.is(':checked'));
});

请注意，如果您在

tbody

中有一些复选框，您不想让代码生效，只需将

css类

添加到

子复选框

（我的意思是需要使用

主复选框

选中/取消选中的复选框），并按如下方式更改代码：

$('.ckbSelectAll > input').on('change', function(){
    var $this = $(this);
    $this.closest('thead')
        .next()
        .find('input[type=checkbox].my-class-name')
        .prop('checked', $this.is(':checked'));
});

---

事实证明，我的问题在于子表。它们在查看页面时可见，但在用户展开它们之前不会显示。我使用了与问题中相同的JavaScript

$.each($('.ckbSelectAll input[type="checkbox"]'),function (index, value) { $(value).change(function () {
alert('checked'); }) });

---

但是使它成为一个在expand上调用的函数。这现在可以正确地连接到选择器，并且一切都可以正常工作。

$。each（）

是为数组或对象设计的。

.each（）

是建议的。类似于：

$（'.ckbSelectAll input[type=“checkbox”]'）。each（函数（ind，el）{$（el）。更改（函数（）{alert（“checked”）；}）；

主要问题是添加了多个具有“ckbSelectAll”的表添加了复选框。因此，我需要观察每一个复选框，并知道当一个复选框被更改为选中一个全选时，应该只选择它表中的复选框。@InsertoldUserId非常简单。你可以用几种方法来做。像你建议的那样观察每一个操作，或者将操作与特定的父项相结合。对，这是我无法完成的部分。我可以看到我设置.each中的所有复选框，但我似乎无法捕获这些复选框上的更改事件。如果我可以获取这些复选框，我可以检查其余的所有复选框。但是'.value.change（function（）'从不触发，因此我无法执行此操作rest@InsertOldUserIDHere如果你看看我的答案以及我是如何绑定

.change（）的

对于类选择器，您无需执行此操作。

更改

回调将绑定到与该选择器匹配的所有元素。然后，当您调用

$（this）

或

this

时，它将与更改的特定元素相关。

$('.ckbSelectAll > input').on('change', function(){
    var $this = $(this);
    $this.closest('thead')
        .next()
        .find('input[type=checkbox].my-class-name')
        .prop('checked', $this.is(':checked'));
});

$.each($('.ckbSelectAll input[type="checkbox"]'),function (index, value) { $(value).change(function () {
alert('checked'); }) });