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>

例如，当第一行中的复选框为groupHeadCheck时，所有复选框id 1 ， 2 和 3 也将被检查。
如果已经选中了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

Answer 2

我相信它可以以更漂亮的方式完成，但这是基本的想法：

$("table tbody").on("change", "input[type=checkbox]", function (e) {
    var currentCB = $(this);
    var isChecked = this.checked;
    if (currentCB.is(".groupHeadCheck")) {
        var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]');
        allCbs.prop('checked', isChecked);
    } else {
        var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
        var allSlaves = allCbs.not(".groupHeadCheck");
        var master = allCbs.filter(".groupHeadCheck");
        var allChecked = isChecked ? allSlaves.filter(":checked").length === allSlaves.length : false;
        master.prop("checked", allChecked);
    }
});

如果您需要运行代码以强制检查所有状态

$(".groupHead").next().find("[type=checkbox]").change();

JSFiddle

Answer 3

如果检查了第一个（或取消全部检查），这将检查所有

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

你可以用你的课程（或ID）来调整一下，使它适合你

Answer 4

我知道这已经得到了解答，但我想要一种更通用的方式来做到这一点。在我的情况下，我想检查列中的所有内容，直到我找到一个新组。我还有3列复选框。第一个复选框列中的名称都以“S_”开头，第二个“A_”和第三个“C_”。我用它来挑选我想要的复选框。我也没有命名用于执行“全部检查”的标题复选框，因此当它到达下一个分组行时会停止。

您可以使用类名来应用相同的逻辑。

首先，这是一个勾选所有复选框的样子：

    <td>
        <input type="checkbox" onchange="checkAll(this, 'S_');" />
   </td>

然后点击时调用的javascript函数：

function checkAll(sender, match)
{
    var table = $(sender).closest('table').get(0);
    var selector = "input[type='checkbox'][name^='" + match + "']";

    for (var i = $(sender).closest('tr').index() + 1; i < table.rows.length; i++)
    {
        var cb = $(table.rows[i]).find(selector).get(0);
        if (cb === undefined)
            break;

        if ($(cb).is(':enabled'))
           cb.checked = sender.checked;

    }
}

因此，它将在每个后续行中搜索名称以“S_”开头的复选框。只有用户有权访问的复选框才会被更改。我打算使用$（td）.index（）来找到正确的列，但这没有用，因为有些行的colspan大于1。

JQuery根据tr的classname检查td中的所有复选框

4 个答案: