Check/Uncheck all the checkboxes in a table using jquery

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">
      <th> <input id="cbSelectAll" type"checkbox" /> <label for="cbSelectAll"></label> </th>
       <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">
    $(document).ready(function () {
        $('[id*=cbSelectAll]').click(function () {
             if ($(this).is(':checked'))
                 $('table [id*=cbSelect]').prop('checked', true)
                 $('table [id*=cbSelect]').prop('checked', false)
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 + 74
We don't publish your email on our website.