使用 Jquery 按行选择 table 内的所有复选框

Question

我有一个脚本应该选中 table 行内的所有复选框。但是通过使用下面的 post 我可以选中 table 中的所有复选框。我不想要这个。我只想按行检查复选框。

引用post:

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

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

点击前勾选所有复选框

选中“全选”复选框后

Answer 1

看起来您的 select 所有复选框都有重复的 ID。 ID 必须是唯一的。您可以将相同的 class 到 select 所有复选框（比如 selectAll），然后使用 class select 或

同样针对最近的 tr，您可以遍历到最近的 tr 而不是获取 table 元素。然后在其中找到输入复选框。像这样：

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

使用 Jquery 按行选择 table 内的所有复选框

Row wise selecting the all checkboxes inside a table with using Jquery

html

checkbox

jquery