Question

我在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 for toggleSelect（）

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

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

Answer 1

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

您还要为循环内的所有组标题chekbox设置相同的Id，这将创建多个具有Id值checkAll的chekbox，这是无效的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事件并切换相关复选框的checked属性

$(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供您参考。

选中mvc中分组数据的复选框

1 个答案: