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.checkedwill 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,210
Related Articles
Set DropDownList value based on text/value in Java Script
Get selected text/value from DropDownList (or) Select in Java Script
Get selected index from DropDownList (or) Select in Java Script
Clear items from DropDownList (or) Select in Java script
How to validate number in Java Script
How to add or remove rows dynamically to HTML Table in Java Script
How to create HTML Table dynamically in Java Script
How to get or set value of a textbox in Java Script
How to get Key Codes in Java Script
How to replace string in Java Script?