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 :
JQUERY
  • 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.
JQUERY
  • 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:
JS
  • 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:
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
New question is currently disabled!