一個復選框，用於選擇由CheckBoxFor生成的所有復選框

Question

我正在使用CheckBoxFor創建一堆復選框的形式。 我已經向這些復選框添加了一個類，但是由於CheckBoxFor並未將該類添加到隱藏的錯誤復選框中，因此我無法基於此選擇這些生成的復選框的組。

這是生成的復選框表的示例。 當我點擊“全選”復選框（最上面的一個）時，我希望選中該列中的所有復選框。 我不希望選擇整個表格，而只選擇列 。

一些相關的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，但是由於它是基於類進行選擇的，因此無法選擇和取消全部選擇，因為錯誤的復選框未添加任何類。

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

有人對另一種方法有任何想法嗎？

Answer 1

從代碼中，我假設您正在將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);
});

我已經將此答案用於檢查/取消檢查邏輯。