A checkbox for selecting all checkboxes generated by CheckBoxFor

Question

I am using CheckBoxFor to create a form of a bunch of checkboxes. I have added a class to these checkboxes but since CheckBoxFor doesn't add the class to the hidden false checkbox, I can't select groups of these generated checkboxes based upon it.

Here's a sample of the checkbox table that gets generated. When I hit the "Select All" checkbox (the top most one), I want all the checkboxes in that column to be selected. I do not want the whole table selected, just the column.

Some of the relevant 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>

Example of the CheckBoxFor statements I'm using:

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

This is the JS I was working with, but since the it's selecting based off the class, it doesn't work to select and unselect all as the false checkbox doesn't have the class added to it.

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

Anybody have any ideas on another way to do this?

The hidden input is irrelevant (its just use to post back a `false` value if the checkbox is unchecked). You just need to use relative selectors - i.e. get all the checkboxes in the same column — , Oct 04 '18 at 21:16
add a different class to all of the checkboxes to select with or better yet, select all of the inputs of type checkbox (assuming theres none you want left out) — GregH, Oct 04 '18 at 21:28

Hooman Bahreini · Accepted Answer · 2018-10-05T08:32:37.417

From your code I assume you are adding NBTC, Contractors, etc classes to each group of checkboxes... you also have several selectAll checkboxes, for each group.

You can change your jQuery like this:

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

I have used this answer for check/uncheck logic.

A checkbox for selecting all checkboxes generated by CheckBoxFor

1 Answers1