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:

  1. Check all the checkboxes when parent checkbox is checked
  2. UnCheck all checkboxes when parent checkbox is unchecked
  3. Check parent checkbox if all the child checkboxes are checked
  4. 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:

View Demo