检查 mvc 中分组数据的复选框答案

【问题标题】：Checkall checkbox for grouped data in mvc检查 mvc 中分组数据的复选框
【发布时间】：2018-07-21 00:34:47
【问题描述】：

我在 mvc 网格中获取分组数据（基于列分组）。我正在尝试在组标题中创建一个复选框，单击该复选框，该组标题中的所有复选框都会被选中。

@foreach(var group in Model.GroupBy(x=>x.Column)){
    {
        <tr class="group-header">
            <td>
                <input type="checkbox" id="checkAll" 
                 onchange="toggleSelect(this.checked)">
            </td>
            <td colspan="6">
                <span class="h3">@group.Key</span>
            </td>
        </tr> 
        foreach(var item in group)
        {
            <tr>
                <td>
                    <input type="checkbox" class="checkGroup">
                </td>
                <td>
                    ...
                </td>
            </tr>
        }

用于切换选择（）的jQuery

function toggleSelect()status{
    $('.checkGroup').prop('checked',status);
}

当我使用它时，所有复选框都会被选中，因为所有复选框都具有相同的类（ckeckGroup）。但我只需要检查组内的复选框。而且要使用的分组是动态的，所以我不能预定义任何组。怎么办？

【问题讨论】：

在 outer @foreach 循环之前声明一个“计数器”并在循环中递增它 - counter++; 并使用它的值来创建类名
同时删除您的id="checkAll" - 重复的id 属性是无效的html

标签： asp.net-mvc checkbox group-by

【解决方案1】：

您当前的代码正在向所有行添加相同的 css 类，因此您的更改将应用于所有这些行。理想情况下，您需要在组标题行/复选框与其下的分组行之间建立某种连接。

您还为循环内的所有组标题检查框设置了相同的Id，这将创建多个 ID 值为 checkAll 的检查框，这是无效的 HTML。文档中的 ID 应该是唯一的。

使用一个简单的计数器变量并使用它对行进行分组。在下面的示例中，我使用 html5 数据属性对行进行分组。

@{
    var keyCounter = 1;
}
@foreach(var group in Model.GroupBy(x=>x.Column)){
{
    <tr class="group-header">
        <td>
            <input type="checkbox" data-group-id="@keyCounter">
        </td>
        <td colspan="6">
            <span class="h3">@group.Key</span>
        </td>
    </tr> 
    foreach(var item in group)
    {
        <tr>
            <td>
                <input type="checkbox"  data-group="@keyCounter">
            </td>
            <td>
                ...
            </td>
        </tr>
    }  
    keyCounter++;
}

这基本上会像这样为标题复选框生成标记

<input type="checkbox" data-group-id="1">

相关的行会有这样的复选框

<input type="checkbox" data-group="1">

随着循环的进行，1 将被替换为 keyCounter 的实际值。

现在您要做的就是在我们的标题行复选框上连接change 事件并切换相关复选框的选中属性

$(function() {

    $("input[data-group-id]").change(function(e) {
        var isChecked = $(this).is(":checked");
        var groupId = $(this).data("group-id");
        var groupedRows = $("input[data-group='" + groupId + "']");
        groupedRows.prop("checked", isChecked);
    });

})

如果group.Key 是一个数值或一个小字符串（没有空格），您可以使用它来代替keyCounter 变量。

Here 是一个可用的 jsbin 供您参考。

【讨论】：