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




how to get selected checkbox value in mvc (3)

Slightly modifying markup from Marve's answer (giving ID to the table)

Working Demo →

EDIT:

Updated version where the 'selectAll' checkbox correctly reflects the state of the checkboxes. E.g. if you select all checkboxes manually, selectAll checkbox will automatically get checked. Try the demo to understand the behavior.

Code:

<table id='myTable'>
    <thead>
        <tr>
            <th><input type="checkbox" /></th>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Tabular Data 1</td>
            <td>Tabular Data 2</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Tabular Data 3</td>
            <td>Tabular Data 4</td>
        </tr>
    </tbody>
</table>

Your jQuery could be as simple as this:

$(document).ready(
    function()
    {
        $('#myTable th input:checkbox').click(
            function() 
            {
                $('#myTable td input:checkbox').attr('checked', $(this).attr('checked'));
            }
        );

        //The following code keeps the 'selectAll' checkbox in sync with
        //the manual selection of the checkboxes by user. This is an additional usability feature.
        $('#myTable tr input:checkbox').click(
            function()
            {
                var checkedCount = $('#myTable td input:checkbox:checked').length;
                var totalCount = $('#myTable td input:checkbox').length;
                $('#myTable th input:checkbox').attr('checked', checkedCount === totalCount);
            }
        );
    }
 );

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.


This will keep all the individual checkboxes the same as the "check all" one

$("#id-of-checkall-checkbox").click(function() {
    $(".class-on-my-checkboxes").attr('checked', this.checked);
});

This will keep the "check all" one in sync with whether or not the individual checkboxes are actually all checked or not

$(".class-on-my-checkboxes").click(function() {
    if (!this.checked) {
        $("#id-of-checkall-checkbox").attr('checked', false);
    }
    else if ($(".class-on-my-checkboxes").length == $(".class-on-my-checkboxes:checked").length) {
        $("#id-of-checkall-checkbox").attr('checked', true);
    }
});

jquery (EDITED to toggle check/uncheck all):

$(document).ready(function() {
    $("#toggleAll").click(function() {  
      $("#chex :checkbox").attr("checked", $(this).attr("checked"));
    });    
});

The reason why I had to do a click() then check for checked status is because if you try to "toggle" a checkbox, the checkbox being toggled will not retain its checked status. This way it retains the check status and effectively toggles.

HTML:

<input type="checkbox" id="toggleAll" />
<div id="chex">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>