Check/Uncheck all the checkboxes in a table using jquery

vikash kumar Nov 21, 2022 516 Views

jquery

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 jQuery 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>
      <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">
    $(document).ready(function () {
        $('[id*=cbSelectAll]').click(function  () {
             if ($(this).is(':checked'))
                 $('table [id*=cbSelect]').prop('checked', true)
             else
                 $('table [id*=cbSelect]').prop('checked', false)
        });
    });
</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

No comments have been posted to this article.

Check/Uncheck all the checkboxes in a table using jquery

Posted Comments

Post a comment

Categories

Recent Posts

About