选中 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 boolean 而不是if/else，给出的只是checkboxes.prop("checked", this.checked);

以更新的tbodys 为例，我在亚洲地区添加了一些国家来证明只选中了相关的复选框：

$(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。

Answer 2

tbody 不是.select_all 的同胞。您需要使用.closest() 选择.select_all 的父级并使用.find() 在其中选择.region_ct。此外，您不需要使用 if/else 到 check/uncheck 复选框。仅使用.prop() 将this.checked 设置为复选框的选中属性。

$('.select_all').change(function() {
    $(this).closest('table').find('.region_ct').prop('checked', this.checked);
});

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