Question

这里需要一点帮助。首先，这是我的HTML的样子：

<div>
<table id="table" width="100%">
<tr>
    <th><input type="checkbox" />Select All</th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
</tr>
</table>
</div>

在一个页面中还有5个这样的表格，我要做的是当在某个表格上勾选<th>复选框时，只有该特定表格中的<td>个复选框将被检查。任何有关如何做到这一点的帮助将不胜感激。

Answer 1

您可以将change事件处理程序绑定到作为th元素后代的所有复选框，然后选中作为最接近table的后代的所有复选框：

$("th :checkbox").change(function() {
    $(this).closest("table").find(":checkbox").prop("checked", true);
});

这是一张包含2张桌子的working example。如果您希望th中的复选框也取消选中所有其他复选框，那么您可以使用prop的第二个参数执行此操作（感谢@SalmanA）：

$("th :checkbox").change(function() {
    $(this).closest("table").find(":checkbox").prop("checked", $(this).is(":checked"));
});

Answer 2

使用以下jquery

$('input[Type="checkbox"]', $('#tableID')).prop("checked", true);

Answer 3

$('#table input:checkbox').prop('checked', true);

为th标签中的每个复选框绑定此事件（如James Allardice的回答）

$('th :checkbox').change(function() {
    $(':checkbox', $(this).closest('table')).prop('checked', true);
});

jQuery / Javascript：选中所有复选框，但仅限于特定表中

3 个答案: