Check/Uncheck checkboxes when parent checkbox is checked/unchecked and vice-versa in Java Script
Introduction:
In this artilce i will expalin Check/Uncheck checkboxes when parent checkbox is checked/unchecked and vice-versa
Description:
In previous articles i explained How to create a HTML Table dynamically in Java Script, and How to Create/Insert rows dynamically to HTML Table and Remove/Delete rows from HTML Table in Java Script. Now i will explain Check/Uncheck checkboxes when parent checkbox is checked/unchecked and vice-versa in Java Script.
Objective:
- Check all the checkboxes when parent checkbox is checked
- UnCheck all checkboxes when parent checkbox is unchecked
- Check parent checkbox if all the child checkboxes are checked
- UnCheck parent checkbox if atleast one checkbox is unchecked
To acheive this functionality, i created two functions checkUncheckAll()
and checkUnCheckParent().
checkUncheckAll():
function checkUncheckAll(sender) {
var chkElements = document.getElementsByName('chkItems');
for (var i = 0; i < chkElements.length; i++) {
chkElements[i].checked = sender.checked;
}
}
Expalnation:
- This function is called by parent/header level checkbox, in onclick event. This function accepts one parameter i.e., sender. Here sender means parent/header level
chekbox
. - First we are finding all the checkboxes with name chkItems. This returns NodeList of checkboxes.
- For each checkbox if parent/header checkbox is checked then current/child checkbox will be checked else not.
- chkElements[i].checked = sender.checked;
- Here
sender.checked
will return bool. It may be true or false. So, this boolean will be assigned to the child checkbox checked property.
checkUnCheckParent():
function checkUnCheckParent() {
var chkHeader = document.getElementById('chkHeader');
var chkElements = document.getElementsByName('chkItems');
var checkedCount = 0;
for (var i = 0; i < chkElements.length; i++) {
if (chkElements[i].checked) {
checkedCount += 1;
}
}
chkHeader.checked = (checkedCount === chkElements.length);
}
Explanation:
- This function is called by child checkbox, in onclick event.
- First we are finding parent/header level checkbox. After that we are find all child checkboxes.
- Initially take checked checkboxes count as zero.
- Now for each checkbox check whether it is checked or not. If it is checked then increment the count by 1.
- Then check
checkedCount === chkElements.length
, if both are equal then check the parent/header level checkbox. - Above statement output, means true (or) false will be assigned to chkHeader checkbox.
Now check the complete source code with example.
Full Source Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CheckBox Demo</title>
<style type="text/css">
* { font-family: Arial, sans-serif; font-size: 12px; }
table.lamp { padding: 0px; border: 1px solid #d4d4d4; }
table.lamp th { color: white; background-color: #666; padding: 10px; padding-left: 10px; text-align: left; }
table.lamp td { padding: 4px; padding-left: 10px; background-color: #ffffff; }
</style>
<script type="text/javascript">
function checkUncheckAll(sender) {
var chkElements = document.getElementsByName('chkItems');
for (var i = 0; i < chkElements.length; i++) {
chkElements[i].checked = sender.checked;
}
}
function checkUnCheckParent() {
var chkHeader = document.getElementById('chkHeader');
var chkElements = document.getElementsByName('chkItems');
var checkedCount = 0;
for (var i = 0; i < chkElements.length; i++) {
if (chkElements[i].checked) {
checkedCount += 1;
}
}
chkHeader.checked = (checkedCount === chkElements.length);
}
</script>
</head>
<body>
<table class="lamp" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>
<input type="checkbox" id="chkHeader" name="chkHeader" onclick="checkUncheckAll(this);" />
</th>
<th>
S.No
</th>
<th>
Item Code
</th>
<th>
Description
</th>
<th>
UOM
</th>
<th>
Unit Price
</th>
</tr>
<tr>
<td>
<input type="checkbox" id="chkItem1" name="chkItems" onclick="checkUnCheckParent();" />
</td>
<td>
1.
</td>
<td>
IT005001
</td>
<td>
Apple IPhone 5C 8 GB
</td>
<td>
NUM
</td>
<td>
27579
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkItem2" name="chkItems" onclick="checkUnCheckParent();" />
</td>
<td>
2.
</td>
<td>
IT005002
</td>
<td>
Apple IPad Mini with Wi-Fi 16GB
</td>
<td>
NUM
</td>
<td>
17488
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkItem3" name="chkItems" onclick="checkUnCheckParent();" />
</td>
<td>
3.
</td>
<td>
IT005003
</td>
<td>
Apple MD760HN/B MacBook Air
</td>
<td>
NUM
</td>
<td>
69999
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkItem4" name="chkItems" onclick="checkUnCheckParent();" />
</td>
<td>
4.
</td>
<td>
IT005004
</td>
<td>
Apple IPad Air with Wi-Fi 16GB
</td>
<td>
NUM
</td>
<td>
34600
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkItem5" name="chkItems" onclick="checkUnCheckParent();" />
</td>
<td>
5.
</td>
<td>
IT005005
</td>
<td>
Apple IPad Min with Retina Display 16GB(Wi-Fi + Cellular)
</td>
<td>
NUM
</td>
<td>
31900
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkItem6" name="chkItems" onclick="checkUnCheckParent();" />
</td>
<td>
6.
</td>
<td>
IT005006
</td>
<td>
Apple IPhone 5S 16GB
</td>
<td>
NUM
</td>
<td>
43500
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkItem7" name="chkItems" onclick="checkUnCheckParent();" />
</td>
<td>
7.
</td>
<td>
IT005007
</td>
<td>
Apple IPhone 4S 8GB
</td>
<td>
NUM
</td>
<td>
22990
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkItem8" name="chkItems" />
</td>
<td>
8.
</td>
<td>
IT005008
</td>
<td>
Apple IPhone 6 16GB
</td>
<td>
NUM
</td>
<td>
53500
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkItem9" name="chkItems" onclick="checkUnCheckParent();" />
</td>
<td>
9.
</td>
<td>
IT005009
</td>
<td>
Apple IPhone 6 Plus 16GB
</td>
<td>
NUM
</td>
<td>
62500
</td>
</tr>
</table>
</body>
</html>
Output:
This is the initial screen of a table with some items.
When parent/header checkbox is checked all the child checkboxes will be checked ana vice-versa.
When parent/header checkbox is checked all the child checkboxes will be checked. After this if we unchcek any of the child checkbox then the parent checkbox will be unchecked.
Demo:
-
CreatedNov 19, 2014
-
UpdatedNov 03, 2020
-
Views4,157