javascript - JQuery 根据 tr 的类名检查 td 中的所有复选框

Question

这是我的示例代码

<table id="accessListTable">
<tr class="ui-grid groupHead">
    <td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="1"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="2"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="3"/></td>
</tr>
<tr class="ui-grid groupHead">
    <td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="4"/></td>
</tr>
</table>

1. 例如，当第一行的复选框带有groupHeadCheck类时，id的所有checkboxex 1、2 和 3 也会被检查。
2. 如果 1、2、3 的复选框均已选中，则将选中第一行的复选框。

请帮忙!

Answer 1

您可以向组复选框添加一个点击处理程序，然后在处理程序内您可以找到其 tr 元素和 tr 的下一个同级元素，直到下一次出现 tr.groupHead

$(function ($) {
    $(".groupHeadCheck").on("click", function (event) {
        $(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', this.checked)
    })
});

演示:Fiddle