Check/Uncheck all the checkboxes in a table using javascript

vikash kumar Nov 21, 2022 143 Views

java script

Download Sample Code

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">
     <tr>
      <th> <input id="cbSelectAll" type"checkbox" /> <label for="cbSelectAll"></label> </th>
      <th>ID</th>
      <th>NAME</th>
      <th>ADDRESS</th>
     </tr>
    </thead>
    <tbody id="tblBody">
      <tr>
       <td> <input id="cbSelect1" type"checkbox" /> <label for="cbSelect1"></label> </td>
       <td>1</td>
       <td>Vikash Kumar</td>
       <td>Gurgaon</td>
      </tr>
      <tr>
       <td> <input id="cbSelect2" type"checkbox" /> <label for="cbSelect2"></label> </td>
       <td>2</td>
       <td>Amit Kumar</td>
       <td>Delhi</td>
      </tr>
    </tbody>
   </table>
  </div>
</div>

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

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.

Screenshot:

Posted Comments

cameron Mar 15, 2023

cialis buy online usa order cialis online us where to buy cialis uk online pharmacy nz cialis cialis 30 pills

Check/Uncheck all the checkboxes in a table using javascript

Posted Comments

Post a comment

Categories

Recent Posts

About