29

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"                      
            });        
        }
    });
   
});

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:

29 Comments Add Comment

  1. Have any of you run into a problem where your “select all” works one time, then after deselecting all, it fails to work again? I’ve debugged it and the function still runs, the value of “checked” updates, but the checkboxes don’t fill.

    Add Reply
  2. {just change the class name } the complete solution is

     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
        $(document).ready(function() {
           $("#select_all").change(function(){
                 if(this.checked){
                $(".chk").each(function(){
                    this.checked=true;
                })             
            }else{
                $(".chk").each(function(){
                    this.checked=false;
                })             
            }
        });

        $(".chk").click(function () {
            if (!$(this).is(":checked")){
                $("#select_all").prop("checked", false);
            }else{
                var flag = 0;
                $(".chk").each(function(){
                    if(!this.checked)
                    flag=1;
                })             
                            if(flag == 0){ $("#select_all").prop("checked", true);}
            }
        });
        });
    Add Reply
  3. Hi, how have to be my javascript snippet, when I select all checkboxes via one and then deselect one of the selected checkboxes (the selectall-checkbox should be deselected)?

    Add Reply
    • Oh no, please try again with:

      //select and deselect
      $(“#chkroot”).click(function () {
      $(‘input:checkbox’).prop(‘checked’, this.checked);
      });

      //If one item deselect then button CheckAll is UnCheck
      $(“.chkmark”).click(function () {
      if (!$(this).is(‘:checked’))
      $(“#chkroot”).prop(‘checked’, false);
      });

  4. I love this and i use it … very very nice….
    I appreciate your tutorial and feel lucky to have tutorial which solve my problem on some change….

    Thanks again…

    Credit your account of google adsense with 2 or 3 click ;) cheer up

    altafhpate.blogspot.com

    Add Reply
  5.  
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // checkAll
        $('.checkAll').click(function(event) {  
            // loop through each checkbox
            $('.checkRows').each(function() {
                // uncheck all checkboxes with class "checkRows"
                if(this.checked) { this.checked = false; }
                // check all with class "checkRows"
                else { this.checked = true; }
            });
        });
    Add Reply
    • i have tested, it’s good
      but You can try:

       
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      //select and deselect
       $("#chkroot").click(function () {
              $('input:checkbox').prop('checked', this.checked);
          });

      //If one item deselect then button CheckAll is UnCheck
          $(".chkmark").click(function () {
              if (!$(this).is(':checked'))
                  $("#chkroot").prop('checked', false);
          });

 

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 ↑