Check All checkbox using Jquery

Details: Written by: Tech Programmer; Category: Code Snippets; Created: 09 September 2009; Hits: 103

This article explains how Jquery can be used to implement a check all checkbox. On checking this 'check all' checkbox, all other checkboxes present in the page will be checked and when unchecked all the checkboxes will be unchecked.

The below HTML code provides such an example:

<html>
 <head>
  <script type="text/javascript" src="/static/jquery-1.3.1.js"></script>
  <script type="text/javascript">
   //Gets called after the page is completely loaded
   $(document).ready( function() {
    //Get the click event of id checkAll
    $('input#checkAll').click(function(){
     //Get the state of checkAll button.
     //We will use it later to assign it to all other checkboxes
     //See this currently points to checkAll element
     var checkAllState = this.checked;
     //Fetch all checkboxes
     $('input:checkbox').each(function() {
      //this now points to each checkbox iterated
      this.checked = checkAllState;
     });
    });
   });
  </script>
 </head>
 <body>
  <div><h2>Check All Check Box</h2></div>
  <div><input type="checkbox" id="checkAll" name="checkAll"/>&nbsp;<b>(Un)Check All Color</b></div>
  <div><input type="checkbox" name="yellow"/>&nbsp;Yellow</div>
  <div><input type="checkbox" name="green"/>&nbsp;Green</div>
  <div><input type="checkbox" name="red"/>&nbsp;Red</div>
  <div><input type="checkbox" name="blue"/>&nbsp;Blue</div>
  <div><input type="checkbox" name="pink"/>&nbsp;Pink</div>
    </body>
</html>

In the javascript section, comments are provided in line explaining the code.

Save the above code as a HTML including the Jquery lib in correct path and see the above code in action.