The Problem

Create a “select all” checkbox that

1. when checked or unchecked, applies its value to all the checkboxes defined as its children
2. when a child checkbox is checked or unchecked, the “select all” checkbox is updated accordingly.  So, if you click the “select all”, but then uncheck one child checbox, deselect the “select all” checkbox.

The Solution

initSelectAll: function ($chkAll, $checkboxes) {

    //when chkAll is clicked, update the other checkboxes with its value
    $chkAll.click(function () {
        $checkboxes.attr("checked", $chkAll.attr("checked"));
    });

    // when any child checkbox is checked or unchecked reset the chkAll value
    // chkAll will be checked if number of checked checkboxes = total number of checkboxes.
    $checkboxes.click(function () {
        $chkAll.attr("checked", $checkboxes.filter(":checked").length == $checkboxes.length);
    }
}

$chkAll = $("#chkAll"); // or however you select the select all checkbox
$checkboxes = $("#checkboxes :checkbox");

$(function () {
    initSelectAll($chkAll, $checkboxes);
});

Tags: Checkbox, jQuery, select all checkbox

This entry was posted on Wednesday, August 17th, 2011 at 6:51 pm and is filed under Development, Javascript, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

« Setting ‘Enable 32-Bit Applications’ To Fix Microsoft.Jet.OLEDB Error Scrollable DataGrid table with Fixed Header with jQuery »