How to Select / Deselect All Checkboxes using jQuery

If you are looking for a quick jQuery snippet that toggles multiple check-boxes checked status simply by clicking “Select All” checkbox (like in Gmail and many other web applications), here’s are few examples that might be useful for your HTML form. I’ve used them many times in my own projects and they work great!

If you have multiple check-box groups in single page, Here’s another example: https://www.sanwebe.com/question/multiple-lists

The jQuery

When user clicks “Select All” checkbox, the code simply iterate through all checkbox input fields with class class=”checkbox”, and applies the checked status (true or false) of clicked checkbox which has id id=”select_all”.

We also need to make sure, when user decides to un-check one of the checkbox from the list, the “Select All” checkbox should also be automatically unchecked.
The jQuery code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//select all checkboxes
$("#select_all").change(function(){  //"select all" change
    var status = this.checked; // "select all" checked status
    $('.checkbox').each(function(){ //iterate all listed checkbox items
        this.checked = status; //change ".checkbox" checked status
    });
});

$('.checkbox').change(function(){ //".checkbox" change
    //uncheck "select all", if one of the listed checkbox item is unchecked
    if(this.checked == false){ //if this item is unchecked
        $("#select_all")[0].checked = false; //change "select all" checked status to false
    }
   
    //check "select all" if all checkbox items are checked
    if ($('.checkbox:checked').length == $('.checkbox').length ){
        $("#select_all")[0].checked = true; //change "select all" checked status to true
    }
});

The jQuery 1.6+

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//select all checkboxes
$("#select_all").change(function(){  //"select all" change
    $(".checkbox").prop('checked', $(this).prop("checked")); //change all ".checkbox" checked status
});

//".checkbox" change
$('.checkbox').change(function(){
    //uncheck "select all", if one of the listed checkbox item is unchecked
    if(false == $(this).prop("checked")){ //if this item is unchecked
        $("#select_all").prop('checked', false); //change "select all" checked status to false
    }
    //check "select all" if all checkbox items are checked
    if ($('.checkbox:checked').length == $('.checkbox').length ){
        $("#select_all").prop('checked', true);
    }
});

Pure JavaScript

Here’s pure JavaScript version for your reference:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var select_all = document.getElementById("select_all"); //select all checkbox
var checkboxes = document.getElementsByClassName("checkbox"); //checkbox items

//select all checkboxes
select_all.addEventListener("change", function(e){
    for (i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = select_all.checked;
    }
});


for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('change', function(e){ //".checkbox" change
        //uncheck "select all", if one of the listed checkbox item is unchecked
        if(this.checked == false){
            select_all.checked = false;
        }
        //check "select all" if all checkbox items are checked
        if(document.querySelectorAll('.checkbox:checked').length == checkboxes.length){
            select_all.checked = true;
        }
    });
}

The HTML

Copy this HTML into your project:

1
2
3
4
5
6
7
8
9
<ul>
    <li><input type="checkbox" id="select_all"/> Selecct All</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 1</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 2</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 3</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 4</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 5</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 6</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
  1. Thanq Very much this code help a lot

     Reply
  2. thanks a lot, this code is very usefull

     Reply
  3. A very helpful post! Thumbs Up! Maybe a link with jsFiddle would also be great!

     Reply

  4. checked=false;
    function checkedAll (frm1) {var aa= document.getElementById(‘frm1’); if (checked == false)
    {
    checked = true
    }
    else
    {
    checked = false
    }for (var i =0; i < aa.elements.length; i++){ aa.elements[i].checked = checked;}
    }

     Reply
  5. It is great, but you had a little mistake, the id=’select_all’ and the $(“selecct_all”) doesn`t match .It`s a spelling mistake.

     Reply
  6. This is a great piece of code. I am very new to the javascript/jquery/php. On my webpage, I have multiple checkbox groups each with their own ‘select all’ option. How do I turn your javascript in to a javascript function and call it from the HTML or PHP with an input parameter? So that I don’t have to copy your javascript over and over for each checkbox group. Thanks.

     Reply
  7. When we Select all the checkboxes one by one then the SelectAll Checkbox should get checked this is missing i guess,

     Reply
    • This function would exactly what I am looking for. If one manually checks all, then top select all box must automatically check too. Is this possible?

    • This should do it :

      1
      2
      3
      4
      5
      6
      $('.checkbox').change(function(){
          //check "select all" if all checkbox item are checked
          if ($('.checkbox:checked').length == $('.checkbox').length ){
              $("#select_all").prop('checked', true);
          }
      });
  8. Saran this is very simple and nice tutorial, your all tutorials are very helpful, i learnt too much from here thanks. Now i also trying to share my knowledge with others, hope they also find solutions of their problems. Hope you like it too.
    http://www.allphptricks.com/how-to-select-deselect-all-checkboxes-using-jquery/

     Reply
  9. add one more feature ie., when one item in the list is unchecked the select all checkbox should be unchecked..

     Reply
  10. Good work on using the select all method with jQuery…

     Reply
  11. WOW !!!

    Thank you very very much, this helped me save a lot of time :-)

    AGAIN THANK YOU VERY MUCH !!!!!!!!!!!!!!!!!!!!!!

     Reply
  12. Yayyy..
    It’s work for me. Many thanks!!!

     Reply
  13. Good share.
    I want to share more script: This script is select all checkbox in current form.
    jQuery( ‘#allcheckbox’ ).click( function ($){ jQuery( this ).closest( ‘form’ ).find( ‘:checkbox’ ).attr( ‘checked’ , this.checked ); });

     Reply
  14. This doesn’t work properly. If I have selected all and I uncheck even one, select all should deselect. Hope its intended behavior.

     Reply
    • Easy solution :

      1
      2
      3
      $(".checkbox1").change(function(){
            $("#selecctall").prop('checked', false);
      });
    • check all
      check/uncheck in single click second way

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      $(document).ready(function(){
          $("#selectall").change(function(){
              $(".c1").prop('checked', $(this).prop("checked"));
              });
          });
      $(document).ready(function(){
          $("#selectall").change(function(){
              $(".c2").prop('checked', $(this).prop("checked"));
              });
          });
  15. > exactly like in Gmail
    GMail supports half-selected selectall-checkbox.

     Reply
  16. Thank you so much .. It helped me lot. You saved me , saved my time.. :)

     Reply
  17. Very Helpful code. Thank you so much…

     Reply
  18. Thanks so much for this!

     Reply
  19. 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????

     Reply
Message Type : Question Comment ?
  • Question : Can include code, jsFiddle, codePen etc using Markdown Syntax.
  • Comment : Short comments and questions.