Blog from Saravanan Arumugam

Let us talk about Technologies

Select All check box with jQuery


Select All check box is usually the checkbox at the top of grid, checking which would check every checkbox in the table/grid. I am going to talk about the check box (imagine check boxes in place of the first column with X) with gray background at the top of the following table.

X Shift Date Employee ID Code Duration Status
x 12/1/2011 232 Read-only User 3 years Active
x 12/1/2011 12 Super User 7 years Active

When I check the Select All checkbox, it should check all the checkboxes in every row. When I uncheck the Select All checkbox, all the checkboxes in the table should be unchecked.

Let me present the code here first and give the explanation below.

    $("input[type='checkbox'].checkAll").bind('change', function () {
        var checkAll = $(this).prop('checked');
 
        $("table:has(input[type='checkbox'].checkAll) input[type='checkbox']")
        .each(function (index, domElement) {
            if ($(domElement).is("input[type='checkbox']")) {
                $(domElement).prop('checked', checkAll);
            }
        });
    });

The script is kept in the shared js file.

The html of the Select All check box is,

<input class=”checkAll” id=”checkAll” name=”checkAll” type=”checkbox” value=”true” /><input name=”checkAll” type=”hidden” value=”false” />

Note that the checkbox never refers to any script. But the script refers to the checkbox by recognizing its class name “checkAll”.

 

Code Explanation

Step 1. Identify the Check All checkbox

$(“input[type=’checkbox’].checkAll”)

The first line of the code starts with a selector ($() is referred to be a selector. It selects the controls that matches its parameters). The selector parameter conveys 3 messages.

  1. input – The selected object should be an input element.
  2. [type=’checkbox’] – The selected object should have an attribute called type and its value should be ‘checkbox’.
  3. .checkAll – The selected object should have the class name checkAll.

The selector usually follows the same syntax that CSS use to identify elements.

 

Step 2. Attach an event handler for onchanged event of Select All checkbox

.bind(‘change’, function () { }

bind() method attaches an event handler to an element’s event. First parameter to the bind() method is the event name and the second parameter is the event handler delegate.

 

Step 3. Store the current state of the Select All checkbox

var checkAll = $(this).prop(‘checked’);

The code above gets the current state (true/false to represent checked/unchecked state) of Select All check box.

$(this) represents the control for which containing function is delegated to. In our case, this refers to the Select All checkbox.

 

Step 4. Select all the checkboxes contained in the table where Select All is housed

$(“table:has(input[type=’checkbox’].checkAll) input[type=’checkbox’]”)

By writing a selector with $(“input[type=’checkbox’]”) we can select all the checkboxes on the page. But we don’t want to check or uncheck something that doesn’t belong to the table containing the Select All checkbox. So in the selector, precede the input[type=’checkbox’] with table:has(input[type=’checkbox’].checkAll). By doing this, we are saying that the container for the input is a table, and the table has the checkbox with the class name checkAll.

 

Step 5. Iterate through all the elements and assign the checked status

.each(function (index, domElement) {

         if ($(domElement).is(“input[type=’checkbox’]”)) {

                 $(domElement).prop(‘checked’, checkAll);

         }

});

Note that each() method takes a function having 2 parameters. As their name suggest, the first one is the index of the element and the second one is the element itself.

if() condition is written just to double check the type of the element, but this is optional at this point.

prop() method is capable of both checking and assigning a value. We are using the prop method on the element to assign the value to the checked property.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: