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!

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

The HTML :

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

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

     Reply
  3. WOW !!!

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

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

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

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

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

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

     Reply
  10. Thanks so much for this!

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

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

Ask a QuestionAllows you to ask question (one-to-one basis) and get answered.