65

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 Gmail), 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.

checkbox

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

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
    $('#selecctall').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"                      
            });        
        }
    });
   
});

Or If you are using jQuery 1.6 and later, you can easily use prop() method (courtesy : htmlcssphptutorial):

 
1
2
3
4
5
$(document).ready(function(){
    $("#selecctall").change(function(){
      $(".checkbox1").prop('checked', $(this).prop("checked"));
      });
});

The HTML :

 
1
2
3
4
5
6
7
8
9
10
<ul class="chk-container">
<li><input type="checkbox" id="selecctall"/> 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>

Demo

  • Selecct All
  • This is Item 1
  • This is Item 2
  • This is Item 3
  • This is Item 4
  • This is Item 5
  • This is Item 6
  • Do not select this

Related Articles:

65 Comments Add Comment

  1. Hi…recently i am working in my one of new project where i need a select query like:
    In a table there are every row have 2 select box(1 select field contain value $id and another contain value $amount(10/100/1000…))…now i want that when i select first select box, another one is selected with previous one. First one count total selected value and second one count total amount selected. I did this with a query but there i had to select both box. Otherwise its not working properly.
    Can you help me plz????

    Add Reply

 

Use Gravatar for Comment Pic | Start a topic for crucial discussion.


 Notify me of followup comments via e-mail. You can also subscribe without commenting.

Go Top ↑