代码之家  ›  专栏  ›  技术社区  ›  MKF

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

  •  0
  • MKF  · 技术社区  · 7 年前

    我使用CheckBoxFor创建一个由一堆复选框组成的表单。我已经向这些复选框中添加了一个类,但是由于CheckBoxFor没有将类添加到隐藏的false复选框中,因此我无法基于它选择这些生成的复选框的组。

    下面是生成的checkbox表的示例。当我点击“全选”复选框(最上面的一个)时,我想选中该列中的所有复选框。 我不想选择整个表,只是列 . enter image description here

    一些相关的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,但是由于它是基于类进行选择的,所以选择和取消选择all都不起作用,因为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;
            }
        });
    

    有人有别的办法吗?

    1 回复  |  直到 7 年前
        1
  •  1
  •   Hooman Bahreini    7 年前

    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);
    });
    

    我用过 this answer