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
12345678910111213141516171819
//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
12345678910111213141516
//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
1234567891011121314151617181920212223
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
123456789
<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
  • 116 Comments

    Add Comment
    • Dan
      Hi. Thanks for this! Just wondering if it is possible to change the "Select All" label to "Unselect all" and toggle back and forth
    • Vivek Kumar
      it is very helpful thank you so much
    • Krushil
      Do I need to put some reference to js? Your code is not working for me
    • Mohammad Kaleem
      Thanks you so much its very helpful for me.
    • Madhu
      Very Helpful code. Thank you so much…
    • Disha
      Thank you sooooo much it's realy works.......
    • Aziz
      //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 } }); 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 This does not run as desired, what am I missing here? Please advice.
    • Aziz
      Do I need to put some reference to js? Your code is not working for me :(
      • Revathy Aziz
        I know its too late, but I'm posting this for the upcoming developers. For select all checkbox we need to check three conditions, 1. on click select all checkbox every checkbox should get selected 2. if all selected then on click select all checkbox, every checkbox should get deselected 3. if we deselect or select any of the checkbox the select all checkbox also should change. with these three things we'll get a good result.for this you can approach this link https://qawall.in/2020/05/30/select-all-or-deselect-all-checkbox-using-jquery/ I got my solution from here, they have provided solution with examples.
    • Lorik
      Very Helpful code. Thank you so much… was searching this for days.. same like wordpress uses in backend.
    • Walulya francis
      thank you very much, it works like cham