javascript - 选择特定范围内的所有复选框？

Question

这是我的代码:

 $(".all_checkboxes").click(function () {
     $('input:checkbox').not(this).prop('checked', this.checked);
 });

td, th{
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Section 1:</h2>
<table>
    <tr>
        <th><input type="checkbox" class="all_checkboxes" /></th>
        <th>Names</th>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>twitter</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>instagram</td>
    </tr>
</table>

<h2>Section 2:</h2>
<table>
    <tr>
        <th><input type="checkbox" class="all_checkboxes" /></th>
        <th>Ids</th>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>454756</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>547498</td>
    </tr>
</table>

我的问题在上面的 fiddle 中几乎很清楚。如您所见，目前这两个部分中的所有复选框都将被选中。我需要做的就是为 jQuery 选择器定义一个范围。我该怎么做？

Answer 1

$('input:checkbox') 将搜索所有复选框。您必须导航到最近的 table 并在其中搜索复选框。

$(".all_checkboxes").click(function () {
     $(this)
      .closest('table')
      .find('input:checkbox')
      .not(this)
      .prop('checked', this.checked);
 });

td, th{
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Section 1:</h2>
<table>
    <tr>
        <th><input type="checkbox" class="all_checkboxes" /></th>
        <th>Names</th>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>twitter</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>instagram</td>
    </tr>
</table>

<h2>Section 2:</h2>
<table>
    <tr>
        <th><input type="checkbox" class="all_checkboxes" /></th>
        <th>Ids</th>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>454756</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>547498</td>
    </tr>
</table>