Check/Uncheck all the checkboxes in a table using javascript

I am explaining here with an example to check/uncheck all checkboxes clicking on table header checkbox. Here i am using HTML and JavaScript to complete the code. See below example.
<div id="productListDiv" class="row">
  <div id="no-more-tables" class="col-sm-12">
   <table class="table">
    <thead class="tbl-head">
      <th> <input id="cbSelectAll" type"checkbox" /> <label for="cbSelectAll"></label> </th>
    <tbody id="tblBody">
       <td> <input id="cbSelect1" type"checkbox" /> <label for="cbSelect1"></label> </td>
       <td>Vikash Kumar</td>
       <td> <input id="cbSelect2" type"checkbox" /> <label for="cbSelect2"></label> </td>
       <td>Amit Kumar</td>
<script type="text/javascript">
    function checkUncheckAllCheckboxes() {
        var headerCheckbox = document.getElementById('cbSelectAll')
        var isChecked = false;
        isChecked = headerCheckbox.checked;
        var table = document.getElementById('tblBody');
        if (table != null) {
             var Inputs = table.getElementsByTagName("input");
             for (i = 0; i < Inputs.length; i++) {
                 if (Inputs[i].type == 'checkbox') {
                     document.getElementById(Inputs[i].id).checked = isChecked;
If i check header checkbox then all checboxes will checked automatically and when i uncheck header checkbox then all checkboxes will unchecked. See screenshot below.

 Posted Comments

No comments have been posted to this article.

 Post a comment

Security Code:
39 + 12
We don't publish your email on our website.