选中特定范围内的所有复选框？

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>

我的问题在上面的小提琴中几乎是清楚的。如您所见，目前所有复选框都将在两个部分中选中。我需要做的就是为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>

Answer 2

1. 如果你想在桌子上。使用closest()获取表格中的复选框
2. 使用更改事件而非点击。

$(".all_checkboxes").change(function () {
     $(this).closest('table').find(':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>

Answer 3

看起来这将是一个重复的操作，所以你应该考虑使用比jQuery更快的解决方案。

此外，您的标记还没有为这些操作做好充分准备。如果更新标记是一个选项。你可以这样做：

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

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

原生JS版本（性能最快）：

function checkAllHandler(e){
  var state = this.checked;
  Array.prototype.forEach.call(
    document.querySelectorAll("[data-rel=" + this.dataset.checkall+"]"),
    function(x){
      x.checked = state;
    }
  )
}

Array.prototype.forEach.call(document.querySelectorAll(".all_checkboxes"), function(x){
  x.addEventListener("click", checkAllHandler);
})

Codepen：https://codepen.io/Mchaov/pen/vexprr?editors=1010