Check/Uncheck checkboxes when parent checkbox is checked/unchecked and vice-versa in Java Script

by rupesx

HTML

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

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; }

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);
        }