Question

这是一个带有嵌套网格视图的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>

我可以通过查找类并找到复选框找到所有标题级别复选框（ckbSelectAll）。我看到我有一个所有标题级别复选框的数组，但.change似乎没有触发它们。

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

我认为它可能是.change并且我尝试过.on（'change'，function（）和.on（'click'，function（）但是无法获得点击或更改以触发警报。

Answer 1

最好使用.each()和.prop()。

工作示例：https://jsfiddle.net/Twisty/6Lowt85a/

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

<强>的JavaScript

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

<强>更新

在多个表的情况下，我会建议这样的事情：

$(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);
    });
  });
});

单击特定标题中的复选框后，将检查或取消选中该表中的相关复选框。

Answer 2

即使您在同一页面中有多个表格，也可以使用以下代码，只需确保main checkbox有ckbSelectAll类：

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

请注意，如果tbody中有一些复选框，您不希望自己的代码生效，只需将css-class添加到sub-checkboxes（我的意思是您复选框）需要检查/取消选中main checkbox）并更改代码如下：

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

jsfiddle

Answer 3

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

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

但使其成为一个在展开时调用的函数。这现在正确地连接到选择器，这一切都有效。

Jquery。更改数组中的复选框

3 个答案: