Question

我原来的javascript是：

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

用于这样的设置：

<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>

我略微改变了我的表格，现在它变成了：

<table>
 <tr>
  <th><input type="checkbox" />select all</th>
 </tr>
</table>
<table>
 <tr>
  <td><input type="checkbox" /></td>
 </tr>
 <tr>
  <td><input type="checkbox" /></td>
 </tr>
</table>

我需要在javascript中更改哪些内容，以便在选中<th>中的复选框时，检查下一个表格中<td>的所有复选框？

感谢。

Related to this post.

Answer 1

将.next()添加到.closest("table")：

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

$(this).closest("table")选择与th :checkbox匹配的元素表。在这种情况下，next()选择下一个元素，即另一个表。

此代码很容易破解。我建议将ID设置为另一个表，并使用以下代码：

$(document).ready(function(){
 $("th :checkbox").change(function() {
    $("#id-of-table :checkbox").prop("checked", $(this).is(":checked"));
 });
});

jQuery / Javascript：检查下表中的所有复选框

1 个答案: