How to Select / Deselect All Checkboxes using jQuery
Written by Saran on January 13, 2014, Updated October 21, 2016If 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
