How to Select / Deselect All Checkboxes using jQuery

If you are newbie developer and looking for a quick jQuery snippet that selects and deselects multiple checkboxes by clicking “Select All” checkbox (exactly like in ymail), here’s one that might be useful for your HTML form. I've used this one in various occasions and it has proved to be very consistent every time.

As you can see in the picture below, we have multiple checkboxes, and we want toggle the select state of checkboxes when we click “Select All” box.

What happens in this code is when user clicks “Select All” checkbox, the code first checks the status of checkbox with id “selectall”, and loops thought each checkbox with class “checkbox1″ and applies “selectall” checkbox status to all other checkboxes. The jQuery code:

$(document).ready(function() {     $('#selectall').click(function(event) {   //on click          if(this.checked) {  // check select status             $('.checkbox1').each(function() {  //loop through each checkbox                 this.checked = true;   //select all checkboxes with class "checkbox1"                            });         }else{             $('.checkbox1').each(function() {  //loop through each checkbox                 this.checked = false; //deselect all checkboxes with class "checkbox1"                                    });                  }     });      });

 HTML :

<ul class="chk-container"> <li><input type="checkbox" id="selectall"/> Selecct All</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item1"> This is Item 1</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item2"> This is Item 2</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item3"> This is Item 3</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item4"> This is Item 4</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item5"> This is Item 5</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item6"> This is Item 6</li> <li><input class="checkbox2" type="checkbox" name="check[]" value="item6"> Do not select this</li> </ul>

//webappsplanet.yolasite.com/