Check Uncheck all checkboxes in ASP.Net Gridview using jquery
Select deselect all checkboxes Asp.Net Gridview using jquery
Select deselect all checkboxes jquery
Multiple checkbox Select/Deselect using jquery

In this blog post, we will see a small example to check or uncheck all checkboxes in a html table using jquery. You can implement the same code in Asp.net gridview.

To make this work, first you need to use jquery in your web page.

There are many articles on web providing code samples to check or uncheck all checkboxes.
But here we will also see how a header checkbox acts indeterminate when few of the checkboxes are checked/unchecked.

The working example code is given below.

check-uncheck-all-checkboxes-jquery
<!DOCTYPE html>
<html>
   <head>
      <title>Index</title>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
      <script type="text/javascript">
         function chkRowClicked() {
             var unChkCount = 0, ChkCount = 0;
             ChkCount = $('.clsChkRow:checkbox:checked').length;
             unChkCount = $('.clsChkRow:checkbox:not(:checked)').length;
             if (ChkCount == 0) {
                 $("#chkHdr").prop("indeterminate", false);
                 $("#chkHdr").prop('checked', false);
             }
             else if (unChkCount == 0) {
                 $("#chkHdr").prop("indeterminate", false);
                 $("#chkHdr").prop('checked', 'checked');
             }
             else {
                 $("#chkHdr").prop("indeterminate", true);
             }
         }
         function chkHdrClicked(chkHdr) {
             if (chkHdr.checked) {
                 $('.clsChkRow').prop('checked', true);
             }
             else {
                 $('.clsChkRow').prop('checked', false);
             }
         }
      </script>
   </head>
   <body>
      <div>
         <form>
            <table border="1">
               <tr>
                  <th>
                     <input id="chkHdr" type="checkbox" title="Select/Unselect All" onclick="chkHdrClicked(this)" />
                  </th>
                  <th>Name</th>
                  <th>Age</th>
                  <th>Country</th>
               </tr>
               <tr>
                  <td>
                     <input type="checkbox" class="clsChkRow" onclick="chkRowClicked()" />
                  </td>
                  <td>Sam</td>
                  <td>23</td>
                  <td>India</td>
               </tr>
               <tr>
                  <td>
                     <input type="checkbox" class="clsChkRow" onclick="chkRowClicked()" />
                  </td>
                  <td>Jhon</td>
                  <td>25</td>
                  <td>USA</td>
               </tr>
               <tr>
                  <td>
                     <input type="checkbox" class="clsChkRow" onclick="chkRowClicked()" />
                  </td>
                  <td>Peter</td>
                  <td>22</td>
                  <td>Australia</td>
               </tr>
               <tr>
                  <td>
                     <input type="checkbox" class="clsChkRow" onclick="chkRowClicked()" />
                  </td>
                  <td>Paul</td>
                  <td>27</td>
                  <td>Canada</td>
               </tr>
            </table>
         </form>
      </div>
   </body>
</html>

 

Leave a Reply

Your email address will not be published.