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!

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 will also be automatically unchecked.
The jQuery code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//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
    });
});

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

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
//select all checkboxes
$("#selecct_all").change(function(){  //"select all" change
    $(".checkbox").prop('checked', $(this).prop("checked")); //change all ".checkbox" checked status
});

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

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

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

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. 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
  2. When we Select all the checkboxes one by one then the SelectAll Checkbox should get checked this is missing i guess,

     Reply
  3. 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
  4. add one more feature ie., when one item in the list is unchecked the select all checkbox should be unchecked..

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

     Reply
  6. WOW !!!

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

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

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

     Reply
  8. 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
  9. 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"));
              });
          });
  10. > exactly like in Gmail
    GMail supports half-selected selectall-checkbox.

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

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

     Reply
  13. Thanks so much for this!

     Reply
  14. 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.

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

Ask a QuestionIf you have issue related to this topic, Please ask here.
fasfwe
sadsa asked 5 hours ago
0 views0 answers0 votes
fasfwe
sadsa asked 5 hours ago
0 views0 answers0 votes
Using IT as GPS ?
ETHO asked 3 hours ago
1 views0 answers0 votes
Issue Creating Shoutbox with jQuery & PHP Facebook Style
Saran answered 2 days ago
15 views1 answers0 votes
How to check all item using a single check box?
Srabon asked 5 days ago
20 views0 answers0 votes
What is the use of RSS FEED ?
Roshani Khanna asked 1 week ago
23 views0 answers0 votes
I am getting error. Can anyone help me, please?
Khin asked 1 week ago
25 views0 answers0 votes
Specify exactly where the file is uploaded to
Saran answered 1 week ago
35 views1 answers0 votes
Ajax contact with Attachment integration with WordPress
Saran answered 1 week ago
56 views1 answers0 votes
Request for methods of efficient news aggregation
Parth asked 2 weeks ago
22 views0 answers0 votes