Check Uncheck All Checkbox using jQuery

In this tutorial, we are going to see how to Check Uncheck All Checkbox using jQuery. We can use this feature in various scenarios like selecting multiple records to perform database update or delete.

In this tutorial we have a simple example with less code for obtaining this feature using jQuery.

We have used this form already in a previous tutorial which is for getting checked items from a group of checkboxes.

This checkbox group shows list of languages as,

<div id="frmCheclAll">
  <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>
</div>

jQuery Script to Check or Uncheck

The above form will trigger jQuery function on 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,

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
		function check_uncheck_checkbox(isChecked) {
			if(isChecked) {
				$('input[name="language"]').each(function() { 
					this.checked = true; 
				});
			} else {
				$('input[name="language"]').each(function() {
					this.checked = false;
				});
			}
		}
</script>

Full Code

<style>
body {
	width:610px;
}
#frmCheclAll {
	border-top:#F0F0F0 2px solid;
	background:#1C4678;
	padding:10px;
}
#divCheckAll {
	background-color:#F2F2F2;
	border:#DADADA 1px solid;
	margin-bottom:15px;
	width:6em;
	padding:4px 10px;
}
#divCheckboxList {
	border-top:#DADADA 1px solid;
}
.divCheckboxItem {
	padding:6px 10px;
	color:#FFFFFF;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
		function check_uncheck_checkbox(isChecked) {
			if(isChecked) {
				$('input[name="language"]').each(function() { 
					this.checked = true; 
				});
			} else {
				$('input[name="language"]').each(function() {
					this.checked = false;
				});
			}
		}
</script>
<div id="frmCheclAll">
  <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>
</div>

Conclusion

Thus we have learned Check Uncheck All Checkbox using jQuery. This article contains a short example of Check Uncheck All Checkbox using jQuery .

I hope this example helped to create your own code to Check Uncheck All Checkbox .