Флажок для выбора всех флажков, сгенерированных CheckBoxFor - PullRequest
0 голосов
/ 04 октября 2018

Я использую CheckBoxFor, чтобы создать форму из набора флажков.Я добавил класс к этим флажкам, но поскольку CheckBoxFor не добавляет класс к скрытому ложному флажку, я не могу выбрать группы этих сгенерированных флажков на его основе.

Вот пример создаваемой таблицы флажков.Когда я установил флажок «Выбрать все» (самый верхний), я хочу, чтобы были установлены все флажки в этом столбце. Я не хочу, чтобы была выбрана вся таблица, только столбец .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"}

Thisэто тот 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;
        }
    });

У кого-нибудь есть идеи по другому способу сделать это?

1 Ответ

0 голосов
/ 05 октября 2018

Из вашего кода я предполагаю, что вы добавляете классы 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);
});

Я использовал этот ответ для проверки / снятия проверки логики.

...