javascript - 选择 tbody 下的所有复选框不起作用

Question

我不知道为什么这个 jquery 不起作用。我想要的非常简单:选择该区域下的所有复选框。有人可以帮忙告诉为什么它不起作用吗？

$(function(){
  $('.select_all').change(function() {
    var checkthis = $(this);
    var checkboxes = $(this).next('tbody').find('.region_ct');
    if(checkthis.is(':checked')) {
      checkboxes.attr('checked', true);
    } else {
      checkboxes.attr('checked', false);  }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <th colspan=2>Americas</th>
  </tr>
  <tr>
    <td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
  </tr>
  <tbody>
    <tr>
      <td><input type="checkbox" class="region_ct" value="X"  /> Argentina</td>
      <td class="center"></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="region_ct" value="X"  /> Barbados</td>
      <td class="center"></td>
    </tr>
  </tbody>
  <tr>
    <th colspan=2>Asia</th>
  </tr>
  ...
</table>

Answer 1

这里有几个问题:

1. 我强烈建议不要混合使用 tr 和 tbody 元素。如果您打算使用tbody(并且您应该)，请始终如一地使用它。浏览器可能会将 tr 元素重新定位到生成的 tbody 元素中。

2. 您调用 next 的元素没有后续同级元素(根本没有，更不用说您要查找的元素了)。您必须沿着层次结构向上遍历到 tr(如果您不修复 #1)或 tbody(如果您这样做)。

3. 您不使用 attr 来设置 checked，而是使用 prop；并且您可以使用现有的 checked bool 值而不是 if/else，给出的只是 checkboxes.prop("checked", this.checked);

更新了 tbody 的示例，我添加了亚洲地区的一些国家/地区来演示仅选中相关复选框:

$(function() {
  $('.select_all').change(function() {
    var checkthis = $(this);
    var checkboxes = $(this).closest('tbody').next().find('.region_ct');
    checkboxes.prop("checked", this.checked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <th colspan=2>Americas</th>
    </tr>

    <tr>
      <td colspan=2>
        <input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="region_ct" value="X" />Argentina</td>
      <td class="center"></td>
    </tr>

    <tr>
      <td>
        <input type="checkbox" class="region_ct" value="X" />Barbados</td>
      <td class="center"></td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <th colspan=2>Asia</th>
    </tr>
    <tr>
      <td colspan=2>
        <input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="region_ct" value="X" />China</td>
      <td class="center"></td>
    </tr>

    <tr>
      <td>
        <input type="checkbox" class="region_ct" value="X" />Vietnam</td>
      <td class="center"></td>
    </tr>
  </tbody>
</table>

您还可以考虑将 select_all 与复选框放在同一个 tbody 中，这样就可以取消 next。