时间戳

首页 > 解决方案 > 用于选择 CheckBoxFor 生成的所有复选框的复选框

javascript - 用于选择 CheckBoxFor 生成的所有复选框的复选框

问题描述

我正在使用 CheckBoxFor 创建一堆复选框的形式。我已经为这些复选框添加了一个类，但由于 CheckBoxFor 没有将该类添加到隐藏的 false 复选框，因此我无法根据它选择这些生成的复选框的组。

这是生成的复选框表的示例。当我点击“全选”复选框（最上面的一个）时，我希望选中该列中的所有复选框。我不想选择整个表格，只选择列。 在此处输入图像描述

一些相关的 HTML：

<td><input type="checkbox" name="selectAll" value="NBTC" /></td>
<td><input type="checkbox" name="selectAll" value="Contractors" /></td>
<td><input type="checkbox" name="selectAll" value="Coordinators" /></td>
<td><input type="checkbox" name="selectAll" value="NGO" /></td>
<td><input type="checkbox" name="selectAll" value="Public" /></td>

我正在使用的 CheckBoxFor 语句示例：

@Html.CheckBoxFor(m => m.NBTCGroup.NBTC_FA_Centroid, new {@class = "NBTC"}

这是我正在使用的 JS，但是由于它是基于类进行选择的，因此选择和取消全选不起作用，因为 false 复选框没有添加类。

$(document).ready(function () {
    $('input[name="selectAll"]').click(function () {
    var source = $(this);
    var sourceName = $(this).val();
    if (sourceName == 'NBTC') {
        var checkboxes = document.querySelectorAll('input[class="NBTC"]');
    }
    else if (sourceName == 'Contractors') {
        var checkboxes = document.querySelectorAll('input[class="Contractors"]');
    }
    else if (sourceName == 'Coordinators') {
        var checkboxes = document.querySelectorAll('input[class="Coordinators"]');
    }
    else if (sourceName == 'NGO') {
        var checkboxes = document.querySelectorAll('input[class="NGO"]');
    }
    else if (sourceName == 'Public') {
        var checkboxes = document.querySelectorAll('input[class="Public"]');
    }
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
        }
    });

有人对另一种方法有任何想法吗？

标签： javascriptjqueryasp.net-mvccheckboxhtml-helper

解决方案

从您的代码中，我假设您正在向每组复选框添加NBTC,Contractors等类...对于每个组，您还有几个selectAll复选框。

你可以像这样改变你的jQuery：

$('input[name="selectAll"]').click(function() {
    var className = $(this).val(); // <-- get the group: NBTC, Contractors, etc
    $('.' + className).prop('checked', this.checked);
    // generates something like this: $('.NBTC').prop('checked', this.checked);
});

我已将此答案用于检查/取消检查逻辑。

推荐阅读