You are viewing an old revision of this post, from December 16, 2021 @ 14:40:08. See below for differences between this version and the current revision.

jQuery – How check or uncheck all checkbox

In this tutorial, we are going to see how to 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. In this tutorial, we have a simple example with less code for obtaining this feature using jQuery.

Form with Checkbox Group

We have used this form already in a previous tutorial which is for getting checked items from a group of checkboxes. jquery-check-uncheck This checkbox group shows a 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;
		});
	}
}
   

Revisions

  • December 16, 2021 @ 14:41:24 [Current Revision] by Sharing Solution
  • December 16, 2021 @ 14:41:24 by Sharing Solution
  • December 16, 2021 @ 14:40:08 by Sharing Solution

Revision Differences

December 16, 2021 @ 14:40:08Current Revision
Content
Deleted: In this tutorial, we are going to see how to check or uncheck group of checkboxes using jQuery. We can use this feature in various scenarios like selecting multiple records to perform database update or delete. Added: In this tutorial, we are going to see how to 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.
Deleted: In this tutorial we have a simple example with less code for obtaining this feature using jQuery. Added: In this tutorial, we have a simple example with less code for obtaining this feature using jQuery.
 Added: <h2>Form with Checkbox Group</h2>
 Added: We have used this form already in a previous tutorial which is for getting checked items from a group of checkboxes.
 Added: <img title="jquery- check-uncheck" src="https:// phppot.com/wp- content/uploads/ 2014/10/jquerycheckuncheck.png" alt="jquery-check-uncheck" width="609" height="204" border="0" />
 Added: This checkbox group shows a list of languages as,
 Added: <pre class="prettyprint lang-php">&lt;div id="divCheckAll"&gt;
 Added: &lt;input type="checkbox" name="checkall" id="checkall" onClick="check_ uncheck_checkbox( this.checked);" /&gt;Check All&lt;/div&gt;
 Added: &lt;div id="divCheckboxList"&gt;
 Added: &lt;div class="divCheckboxItem" &gt;&lt;input type="checkbox" name="language" id="language1" value="English" /&gt;English&lt;/div&gt;
 Added: &lt;div class="divCheckboxItem" &gt;&lt;input type="checkbox" name="language" id="language2" value="French" /&gt;French&lt;/div&gt;
 Added: &lt;div class="divCheckboxItem" &gt;&lt;input type="checkbox" name="language" id="language3" value="German" /&gt;German&lt;/div&gt;
 Added: &lt;div class="divCheckboxItem" &gt;&lt;input type="checkbox" name="language" id="language4" value="Latin" /&gt;Latin&lt;/div&gt;
 Added: &lt;/div&gt;</pre>
 Added: <h2>jQuery Script to Check or Uncheck</h2>
 Added: The above form will trigger the jQuery function by clicking the header checkbox next to the <em>Check All </em>label. jQuery function will check whether the header checkbox is checked or unchecked.
 Added: 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,
 Added: <pre class="prettyprint lang-php">function check_uncheck_ checkbox(isChecked) {
 Added: if(isChecked) {
 Added: $('input[name= "language"]') .each(function() {
 Added: this.checked = true;
 Added: });
 Added: } else {
 Added: $('input[name= "language"]') .each(function() {
 Added: this.checked = false;
 Added: });
 Added: }
 Added: }</pre>
 Added: &nbsp;
Unchanged: &nbsp;Unchanged: &nbsp;

Note: Spaces may be added to comparison text to allow better line wrapping.

No comments yet.

Leave a Reply