In this tutorial i will demostrate how to check/uncheck multiple checkboxes using Jquery. Multiple check/uncheck select box feature is used in many applications. If you are gmail user then probably you have seen this feature for selecting multiple mails. Let’s first create some checkboxes
|
1 2 3 4 5 6 |
<input type="checkbox" id="select"/> Select All<br/><br/> <input class="select_checkbox" type="checkbox" name="check[]" value="val1"> Checkbox1 <input class="select_checkbox" type="checkbox" name="check[]" value="val2"> Checkbox2 <input class="select_checkbox" type="checkbox" name="check[]" value="val3"> Checkbox3 <input class="select_checkbox" type="checkbox" name="check[]" value="val4"> Checkbox4 |
In next step what we have to do, if someone clicks on select all checkbox, all checkboxes should be selected. When someone uncheck the select all checkbox then all checkboxes should be unchecked.
Jquery Code to Check/Uncheck Multiple Checkboxes
|
1 2 3 4 5 |
// Check if DOM is ready $(document).ready(function() { }); |
Next capture click event on select All checkbox
|
1 2 3 4 5 |
$(document).ready(function() { $('#select').click(function() { }); }); |
In the next step if you click on select all checkbox, the all the checkbox should be selected
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
if(this.checked) { // If select all is checked // select all the checkbox whose class is select_checkbox. $('.select_checkbox').each(function() { this.checked = true; }); }else{ //In else case deselect all the checkbox $('.select_checkbox').each(function() { this.checked = false; }); |
Final Script
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function() { $('#select').click(function() { if(this.checked) { $('.select_checkbox').each(function() { this.checked = true; }); }else{ $('.select_checkbox').each(function() { this.checked = false; }); } }); |
