How can I implement a "Select All" checkbox in my ASP.NET MVC app?

Question

I have a table with a column full of checkboxes. At the top I would like to have a single "Select All" checkbox that would check all the checkboxes on that page.

How should I implement this? I'm using jQuery as my JavaScript framework if it matters.

Answer 1

For me, Jeremy's solution mostly worked, but I had to replace .attr with .prop. Otherwise once I single clicked on a checkbox it would stop reacting to the "master" checkbox.

in the _Layout.cshtml (master page)

$(document).ready(
    manageCheckboxGroup('chkAffectCheckboxGroup', 'checkbox-group')
);

in a referenced .js

    function manageCheckboxGroup(masterCheckboxId, slaveCheckboxesClass) {

    $("#" + masterCheckboxId).click(function () {
        $("." + slaveCheckboxesClass).prop('checked', this.checked);
    });

    $("." + slaveCheckboxesClass).click(function () {
        if (!this.checked) {
            $("#" + masterCheckboxId).prop('checked', false);
        }
        else if ($("." + slaveCheckboxesClass).length == $("." + slaveCheckboxesClass + ":checked").length) {
            $("#" + masterCheckboxId).prop('checked', true);
        }
    });
}

in the HTML (Razor) page

<table class="table">
    <thead>
        <tr>
            <th><input id="chkAffectCheckboxGroup" type="checkbox" checked="checked" /></th>
            <th>
                @Html.DisplayNameFor(model => model.Clients[0].ClientId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Clients[0].Name)
            </th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Clients.Count(); i++)
        {
            <tr>
                <td>
                    <input type="hidden" asp-for="Clients[i].Id" class="form-control" />
                    <input type="hidden" asp-for="Clients[i].Name" />
                    <input type="checkbox" class="checkbox-group" asp-for="Clients[i].Selected" />
                </td>
                <td>
                    @Html.DisplayFor(modelItem => Model.Clients[i].Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => Model.Clients[i].Name)
                </td>
            </tr>
        }
    </tbody>
</table>

IMPORTANT: also, at first I had a @foreach loop in the HTML and it did not work..., you must use a @for (int i = 0; i < Model.Clients.Count(); i++) loop instead otherwise you end up with a empty list in the OnPostAsync().