Select All Pattern
Implement a "select all" checkbox that controls all child checkboxes in a table or list — and syncs state when individual items change.
jQuery
Intermediate
4 min read
Select All Checkboxes
Example
$("#selectAll").on("change", function() {
$(".item-check").prop("checked", $(this).is(":checked"));
});
$(".item-check").on("change", function() {
const total = $(".item-check").length;
const checked = $(".item-check:checked").length;
$("#selectAll").prop({
checked: checked === total,
indeterminate: checked > 0 && checked < total
});
}); Pro Tip
The indeterminate state visually indicates a partial selection — always implement it.