jquery - 使用 Jquery 逐行选择表格内的所有复选框

Question

我有一个脚本应该检查表格行内的所有复选框。但是通过使用下面的帖子，我能够检查表格内的所有复选框。我不想要这个。我只想逐行选中复选框。

引用帖子:

Jquery select all checkboxes in table

示例 HTML 代码:

<table>
<tr>
    <th>
        <input type="checkbox" id="selectAll" />
    </th>
    <th>
        hi!
    </th>
</tr>
<tr>
    <td>
        <input type="checkbox" id="1"/>
    </td>
    <td>
        hi!
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" id="2"/>
    </td>
    <td>
        hi!
    </td>
</tr>
    </table>

示例 Jquery:

  $('#selectAll').click(function(e){
var table= $(e.target).closest('table');
$('td input:checkbox',table).prop('checked',this.checked);
});

请看下面关于我的项目的截图

1. 点击前勾选所有复选框

1. 勾选全选复选框后

Answer 1

看起来您有用于选择所有复选框的重复 ID。 ID 必须是唯一的。您可以给同一个类来选择所有复选框(比如 selectAll)，然后使用类选择器。

同样为了定位最近的 tr，你可以遍历到最近的 tr 而不是获取表元素。然后在其中找到输入复选框。像这样:

$('.selectAll').click(function(e){
  var tr= $(e.target).closest('tr');
  $('td input:checkbox',tr).prop('checked',this.checked);
});