jQuery Check Uncheck All Select Deselect All CheckBoxes in HTML Table

In this article I will explain with an example, how to implement Check Uncheck All / Select Deselect All multiple CheckBoxes in HTML Table using jQuery.

The HTML Table with CheckBoxes will be populated using Array and the CheckBox in Header Row will be used to Check Uncheck All / Select Deselect All multiple CheckBoxes in HTML Table using jQuery.

HTML Markup

The following HTML markup consists of an HTML Table with a Header row consisting of a CheckBox in the first column. This Checkbox will be used to Check Uncheck All / Select Deselect All multiple CheckBoxes in HTML Table.

<head>

</head>

<body>

$(function () {

//Build an array containing Customer records.

var customers = new Array();

customers.push([1, "John Hammond", "United States"]);

customers.push([2, "Mudassar Khan", "India"]);

customers.push([3, "Suzanne Mathews", "France"]);

customers.push([4, "Robert Schidner", "Russia"]);

//Add the data rows.

$(customers).each(function () {

//Get the reference of the HTML Table.

var table = $("#tblCustomers")[0];

//Add Row.

row = table.insertRow(-1);

//Add CheckBox cell.

var cell = $(row.insertCell(-1));

var chk = $("<input />");

chk.attr("type", "checkbox").attr("class", "chkRow");

cell.append(chk);

cell[0].innerHTML += this[0];

//Add Name cell.

cell = $(row.insertCell(-1));

cell.html(this[1]);

//Add Country cell.

cell = $(row.insertCell(-1));

cell.html(this[2]);

});

$("#chkAll").click(function () {

//Determine the reference CheckBox in Header row.

var chkAll = this;

//Fetch all row CheckBoxes in the Table.

var chkRows = $("#tblCustomers").find(".chkRow");

//Execute loop over the CheckBoxes and check and uncheck based on

//checked status of Header row CheckBox.

chkRows.each(function () {

$(this)[0].checked = chkAll.checked;

});

$(".chkRow").click(function () {

//Determine the reference CheckBox in Header row.

var chkAll = $("#chkAll");

//By default set to Checked.

chkAll.attr("checked", "checked");

//Fetch all row CheckBoxes in the Table.

var chkRows = $("#tblCustomers").find(".chkRow");

//Execute loop over the CheckBoxes and if even one CheckBox

//is unchecked then Uncheck the Header CheckBox.

chkRows.each(function () {

if (!$(this).is(":checked")) {

chkAll.removeAttr("checked", "checked");

return;

}

});

</script>

<tr>

<th>

CustomerId

</th>

<th>

Name

</th>

<th>

Country

</th>

</tr>

</table>

</body>

</html>

Explanation

Data Array

Inside the jQuery document ready event handler, an Array is created which will contain the cell values of each HTML Table row.

A loop is executed over the Array items and one by one a HTML Table row is appended to the HTML Table.

First the reference of the HTML Table is determined and then a new HTML Table row is generated and inserted into the HTML Table using the JavaScript insertRow method.

Table insertRow Method: This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position.

Once the HTML Table row is created, three cells are added to it using the JavaScript insertCell method.

Table Row insertCell Method: This method adds a new cell to a Table Row at the specified index. If the index is supplied as -1 then the cell will be added at the last position.

The first cell consists of a CheckBox while the other two cells are for the Name and Country values respectively.

Check Uncheck all CheckBoxes

This functionality is implemented using the Click event handler of the Header row CheckBox.

When the Header row CheckBox is checked or unchecked, a loop is executed over the row CheckBoxes and it is checked if the Header row CheckBox is checked and it is unchecked if the Header row CheckBox is unchecked.

Check Uncheck Header row CheckBox

This functionality is implemented using the Click event handler of the row CheckBox.

When the row CheckBox is checked or unchecked, first the reference of the Header row CheckBox is determined and it is marked as checked.

Then a loop is executed over the row CheckBoxes and a test is performed to verify whether it is checked or not.

This is done to make sure that if all the row CheckBoxes are checked, then the Header row CheckBox must also be checked and if even one row CheckBox is unchecked, then the Header row CheckBox must also be unchecked.

Screenshot