Select all Checkbox Functionality Inside a html Table using jQuery

Here is the jQuery implementation of Select All checkbox functionality inside a HTML table.

Try out the attached working sample.

HTML:

<table border="1">
 <tr><th><input type="checkbox" id="selectall" /></th>
            <th>Heading1 </th><th>Heading2 </th>
 </tr>
 <tr>
 <td align="center">
  <input type="checkbox" class="case" name="case" value="1" /> </td>
 <td>Row1</td>
 <td>Row1</td>
 </tr>
 <tr>
  <td align="center">
   <input type="checkbox" class="case" name="case" value="2" /></td>
  <td>Row2</td>
  <td> Row2</td>
 </tr>

jQuery:

<script
type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>

<script type="text/javascript" >
    $(document).ready(function() {
      // add multiple select / deselect functionality
        $("#selectall").click(function() {
        $('.case').attr('checked', this.checked);
         });
     // if all checkbox are selected, check the selectall checkbox  also        

     $(".case").click(function() {
        if ($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
         }
        else {
        $("#selectall").removeAttr("checked");
         }      
         });
     });
    </script>

Thanks shinu .
 

Up Next
    Ebook Download
    View all
    Learn
    View all