Question

我不确定为什么这个jquery不起作用。我想要的是非常简单：选择该区域下的所有复选框。有人可以帮忙说出它为什么不起作用吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

那里有几个问题：

我会强烈建议不要混用tr和tbody元素。如果您打算使用tbody（并且您应该），请始终如一地使用它。浏览器可以将tr个元素重新定位到生成的tbody元素中。
您正在呼叫next的元素没有以下兄弟（根本不是您正在寻找的那个）。您必须遍历层次结构到tr（如果您没有修复＃1）或tbody（如果您这样做）。
您不使用attr设置checked，而是使用prop;并且你可以使用现有的checked布尔而不是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。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

选中tbody not working下的所有复选框

2 个答案: