JavaScript 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 JavaScript.

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 JavaScript.

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>

window.onload = 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.

for (var i = 0; i < customers.length; i++) {

//Get the reference of the HTML Table.

var table = document.getElementById("tblCustomers");

//Add Row.

row = table.insertRow(-1);

//Add CheckBox cell at First position.

var cell = row.insertCell(0);

var chk = document.createElement("INPUT");

chk.type = "checkbox";

chk.setAttribute("onclick", "CheckUncheckHeader()");

cell.appendChild(chk);

cell.innerHTML += customers[i][0];

//Add Name cell.

cell = row.insertCell(-1);

cell.innerHTML = customers[i][1];

//Add Country cell.

cell = row.insertCell(-1);

cell.innerHTML = customers[i][2];

}

};

function CheckUncheckAll(chkAll) {

//Fetch all rows of the Table.

var rows = document.getElementById("tblCustomers").rows;

//Execute loop on all rows excluding the Header row.

for (var i = 1; i < rows.length; i++) {

rows[i].getElementsByTagName("INPUT")[0].checked = chkAll.checked;

}

};

function CheckUncheckHeader() {

//Determine the reference CheckBox in Header row.

var chkAll = document.getElementById("chkAll");

//By default set to Checked.

chkAll.checked = true;

//Fetch all rows of the Table.

var rows = document.getElementById("tblCustomers").rows;

//Execute loop on all rows excluding the Header row.

for (var i = 1; i < rows.length; i++) {

if (!rows[i].getElementsByTagName("INPUT")[0].checked) {

chkAll.checked = false;

break;

}

};

</script>

<tr>

CustomerId

</th>

<th>Country</th>

</tr>

</table>

</body>

</html>

Explanation

Data Array

Inside the Window load 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 CheckUncheckAll method which is called when the Header row CheckBox is checked or unchecked.

Inside this method, a loop is executed over the rows of the HTML Table excluding the Header row. In each row, the reference of the CheckBox is determined 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 CheckUncheckHeader method which is called when any CheckBox in the row of the HTML Table is checked or unchecked.

Inside this method, first the reference of the Header row CheckBox is determined and it is marked as checked.

Then a loop is executed over the rows of the HTML Table excluding the Header row. In each row, the reference of the CheckBox is determined 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