Either newbie or experienced developer, everyone occasionally needs a quick jQuery snippet that selects and deselects multiple checkboxes by clicking “Select All” checkbox (exactly like in Gmail). Here are two code snippet that perform the same action. You can use either of them.
We are creating two functions (in each code snippet), one to Select / Deselect all Checkboxes on clicking on Select All checkbox and another to check / uncheck it if any of corresponding checkboxes is clicked. You can check the live example here.
First of all let’s create an array of checkboxes:
1 2 3 4 5 6 7 8 9 10 | <ul class="chkAry"> <li><input type="checkbox" id="checkAll"/> <strong>Select All</strong></li> <li><input class="chk" type="checkbox" name="check[]" value="element1"> This is Element 1</li> <li><input class="chk" type="checkbox" name="check[]" value="element2"> This is Element 2</li> <li><input class="chk" type="checkbox" name="check[]" value="element3"> This is Element 3</li> <li><input class="chk" type="checkbox" name="check[]" value="element4"> This is Element 4</li> <li><input class="chk" type="checkbox" name="check[]" value="element5"> This is Element 5</li> <li><input class="chk" type="checkbox" name="check[]" value="element6"> This is Element 6</li> <li><input class="chk" type="checkbox" name="check[]" value="element7"> This is Element 7</li> </ul> |
At top of the list, you can see there is a checkbox with id="checkAll" and label: Select All. The jQuery prop() function will select / Deselect all checkboxes with underlying class chk on clicking on this element.
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function() { //Select and deselect all checkboxes $("#checkAll").click(function () { $('.chk').prop('checked', this.checked); }); //If one item deselect then checkbox 'checkAll' is UnCheck //If all items select individually then checkbox 'checkAll' is Check $(".chk").click(function () { $("#checkAll").prop('checked', ($('.chk:checked').length == $('.chk').length) ? true : false); }); }); |
Nice? In line number 10, we are comparing number of elements in class chk and chk:checked. If both are same then all checkboxes are checked, make the top element checked otherwise no.
The Long Tale: This one below is added as a reference to help understanding in more easier way, while working of the both will be same:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <script type="text/javascript"> $(document).ready(function() { $("#checkAll").change(function(){ if(this.checked){ //Check selected or not $(".chk").each(function(){ //Loop through each checkbox with class chk and select it this.checked = true; }) } else { $(".chk").each(function(){ //Loop through each checkbox with class chk and deselect it this.checked = false; }) } }); $(".chk").click(function () { //On click at any checkbox with chk class if (!$(this).is(":checked")){ //If particular one is unchecked then uncheck the Select All $("#checkAll").prop("checked", false); } else { var flag = 1; //Setting flag to 1 while assuming all checkboxes with class chk are selected $(".chk").each(function(){ if(!this.checked) flag = 0; //If particular or more are unchecked then set flag to 0 }) if(flag) { // All checkboxes are selected so also select Select All checkbox $("#checkAll").prop("checked", true); } } }); }); </script> |
A quick note: The prop() function is not available in jQuery library prior to version 1.6. If you are using older version then use attr() instead of prop(). Also if you wish to add more checkboxes in the list but not intended to select / deselect in the group behaviour, just add them but don’t assign a class or assign a class name except chk:
1 | <li><input class="classZ" type="checkbox" name="check[]" value="element8"> This is Excluded Element 8</li> |
The complete code to Select / Deselect all Checkboxes using jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Select / Deselect all Checkboxes using jQuery</title> </head> <body> <ul class="chkAry"> <li><input type="checkbox" id="checkAll"/> <strong>Select All</strong></li> <li><input class="chk" type="checkbox" name="check[]" value="element1"> This is Element 1</li> <li><input class="chk" type="checkbox" name="check[]" value="element2"> This is Element 2</li> <li><input class="chk" type="checkbox" name="check[]" value="element3"> This is Element 3</li> <li><input class="chk" type="checkbox" name="check[]" value="element4"> This is Element 4</li> <li><input class="chk" type="checkbox" name="check[]" value="element5"> This is Element 5</li> <li><input class="chk" type="checkbox" name="check[]" value="element6"> This is Element 6</li> <li><input class="chk" type="checkbox" name="check[]" value="element7"> This is Element 7</li> </ul> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Select and deselect all checkboxes $("#checkAll").click(function () { $('.chk').prop('checked', this.checked); }); //If one items deselect then checkbox 'checkAll' is UnCheck //If all items select individually then checkbox 'checkAll' is Check $(".chk").click(function () { $("#checkAll").prop('checked', ($('.chk:checked').length == $('.chk').length) ? true : false); }); }); </script> </body> </html> |
This is the most thorough example I have seen for select / deselect all checkboxes using Jquery. Simply for the fact that you deselect the Select All checkbox when one of the other checkboxes is deselected. Most examples don’t include that one important detail. Thanks!
I have check boxes with same id “RoleType_1″ how can i loop all the check boxes with same id. springedge.com
You can use foreach loop as code shown in attached image.
Thanks, but when i am trying to disable all the chkboxes it is disabling only first one.. its may be because of same id for a group of chkboxes
The easiest way to achieve the same is assign a common class to checkboxes and call jquery.
$(‘.theCheckbox’).attr(‘disabled’,true);
Please check the fiddle: http://jsfiddle.net/pekf9k4u/1/
Done.. Thanks
SpringEdge.com – Messaging web to mobile
Very Nice!!