Learn how to select or deselect all checkboxes using jQuery. This is a short and easy to use jquery code that checks all checkbox on one click.
Check or uncheck checkboxes feature is generally used to select multiple records to update or delete action.
jQuery Check Uncheck Checkbox Example:
First creating an HTML layout to show the group checkbox list.
In this, we have to call the jquery function toggleCheckbox() via onclick event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="checkboxAll"> <input type="checkbox" name="checkall" id="checkall" onClick="toggleCheckbox(this.checked);" /> Select All </div> <div> <div class="CheckBoxCls"> <input type="checkbox" name="user" value="Danny" /> Danny </div> <div class="CheckBoxCls"> <input type="checkbox" name="user" value="Jhon" /> Jhon </div> <div class="CheckBoxCls"> <input type="checkbox" name="user" value="Nicky" /> Nicky </div> <div class="CheckBoxCls"> <input type="checkbox" name="user" value="Devin" /> Devin </div> </div> |
jQuery Select All Checkboxes Script
On this toggleCheckbox() jquery function call, it will check whether the top Select ALL checkbox is checked or not.
Based on the status of top checkbox, the jquery script will iterate the group checkboxes by name and update their status.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function toggleCheckbox(isChecked) { if(isChecked) { $('input[name="user"]').each(function() { this.checked = true; }); } else { $('input[name="user"]').each(function() { this.checked = false; }); } } </script> |
Output:
