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
