57

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:

57 Comments Add Comment

  1. I am getting checked all but after submitting form I am not getting checkbox values when page reload after click on submit button.

    Add Reply
  2. this vill not working

     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function checkAll() {
        checkEm = document.getElementById("check_all").checked
        var cbs = document.getElementsByTagName('input');
        for (var i = 0; i < cbs.length; i++) {
           
            //alert(i)
           
            if (cbs[i].type == 'checkbox') {
                cbs[i].checked = checkEm;
            }
        }
    }
    Add Reply
  3. how to check the module check box if all the sub modules check box are selected

     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
      function abc() {
        var flag=0;
        $('.checkAll').click(function(event) {  //on click
              if(this.checked) {
                  $('.checkAll').each(function() {
                      if(this.checked){
                          flag=1;
                      }
                      else{
                          flag=0;
                      }
                  });
              if(flag==1){
                  $('.selectAll').checked=true;
              }
            }
        });
       
    };
    Add Reply
  4. Hi, thank’s for your help. I try this:

     
    1
    2
    3
    4
    5
    6
    7
    8
    $(document).ready(function() {
        $('#selecctall').click(function(event) {  //on click
                    $('.checkbox1').each(function() {
                    this.checked = ! this.checked;
        });

        });  
    });
    Add Reply
  5. I have table with lots of checkboxes. Then i filter tasble with jquery.filtertable.js . And i want to select only visible checkboxes. Now if i`m selecting with whis script it`s selects all checkboxes. even not visible. Any solutions ?

    Add Reply
  6. I realize this is a bit of an old thread, but this code worked great for me. The only issue is that I’m using this on a site where I’m trying to check boxes that will then be added to a shopping cart. Currently the checkbox that gets created with each product only adds the product to the cart when the user clicks it using jquery on.(‘click’). is there a way to make the Select All automatically “click” all the boxes instead of only selecting them?

    Add Reply
    • Yep add click event for each checkbox in the each statement:

       
      1
      2
      3
      4
      $('.checkbox').each(function() {
                      this.checked = true;
                       this.click();              
                  });
    • Hi Semmy. HTML doesn’t allow you to have multiple elements with the same id. Id is to uniquely identify an element. If you have several elements that all need to have the same functionality (or style) you would use the class attribute instead of the id attribute.

  7. 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
  8. {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
  9. 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);
      });

  10. 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
  11.  
    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 ↑