Check Uncheck All Checkbox using jQuery
by Vincy. Last modified on July 6th, 2023.
This tutorial will check or uncheck a group of checkboxes using jQuery. We can use this feature in various scenarios, like selecting multiple records to perform database updates or delete.
This tutorial has a simple example with less code for obtaining this feature using jQuery.
Form with Checkbox Group
We have used this form in a previous tutorial to get checked items from a group of checkboxes.
This checkbox group shows list of languages as,
<div id="divCheckAll">
<input type="checkbox" name="checkall" id="checkall"
onClick="check_uncheck_checkbox(this.checked);" />Check All
</div>
<div id="divCheckboxList">
<div class="divCheckboxItem">
<input type="checkbox" name="language" id="language1" value="English" />English
</div>
<div class="divCheckboxItem">
<input type="checkbox" name="language" id="language2" value="French" />French
</div>
<div class="divCheckboxItem">
<input type="checkbox" name="language" id="language3" value="German" />German
</div>
<div class="divCheckboxItem">
<input type="checkbox" name="language" id="language4" value="Latin" />Latin
</div>
</div>
jQuery Script to Check or Uncheck
The above form will trigger the jQuery function by clicking the header checkbox next to the Check All label. jQuery function will check whether the header checkbox is checked or unchecked.
Based on the status of this header checkbox, the jQuery script will iterate over the group of checkbox items and change their status. The script is,
function check_uncheck_checkbox(isChecked) {
if(isChecked) {
$('input[name="language"]').each(function() {
this.checked = true;
});
} else {
$('input[name="language"]').each(function() {
this.checked = false;
});
}
}
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.