Select or Deselect all Checkboxes using jQuery
Today, in this short article we’ll share with you a simple code to select or deselect all checkboxes using jQuery. In this article we will create a simple HTML form and try to implement checkboxes for check / uncheck demo.
Steps to select or deselect all checkboxes
1. Create an HTML form
Let’s create an HTML form where we will have multiple checkboxes that can be controlled by the Select All checkbox.
1 2 3 4 5 6 7 8 9 | <form method="post" action=""> <h3>Select or Deselect all Checkboxes using jQuery - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <label><input type="checkbox" id="checkAll" /> Select All</label><br /><br /> <label><input class="chk" type="checkbox" name=item[] value="1" /> Item 1</label><br /> <label><input class="chk" type="checkbox" name=item[] value="2" /> Item 2</label><br /> <label><input class="chk" type="checkbox" name=item[] value="3" /> Item 3</label><br /> <label><input class="chk" type="checkbox" name=item[] value="4" /> Item 4</label><br /> <label><input class="chk" type="checkbox" name=item[] value="5" /> Item 5</label> </form> |
Here, we have added the master checkbox with id checkAll to select or deselect all checkboxes and added the other checkboxes with class chk.
2. Include jQuery library
In the next step, we need to include the following jQuery library in the head section.
1 2 | <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> |
3. Add script for select/deselect functionality
We’ll use the .prop() method to toggle the checkbox on the click of the Select All checkbox to select / deselect all checkboxes.
1 2 3 4 5 6 7 | <script> $(document).ready(function () { $("#checkAll").change(function () { $("input:checkbox").prop('checked', $(this).prop("checked")); }); }); </script> |
After selecting the all the checkbox, the user deselects any of the checkboxes, the master checkbox should be deselected. Similarly, if master checkbox deselect and user select all checkbox one by one then the master checkbox will be selected.
To do this, when the checkbox with class ‘chk’ is clicked, we will check the length of the selected checkbox with class chk and total checkbox with class chk. If both are the same then the master checkbox with id checkAll will be selected otherwise deselected.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script> $(document).ready(function () { ... ... $('.chk').on('click', function () { if ($('.chk:checked').length == $('.chk').length) { $('#checkAll').prop('checked', true); } else { $('#checkAll').prop('checked', false); } }); }); </script> |
4. Output
At the last, combine the all above code and run the page in the browser.
index.html
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 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html> <head> <title>Select or Deselect all Checkboxes using jQuery - Clue Mediator</title> <style> form { margin: 20px; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script> $(document).ready(function () { $("#checkAll").change(function () { $("input:checkbox").prop('checked', $(this).prop("checked")); }); $('.chk').on('click', function () { if ($('.chk:checked').length == $('.chk').length) { $('#checkAll').prop('checked', true); } else { $('#checkAll').prop('checked', false); } }); }); </script> </head> <body> <form method="post" action=""> <h3>Select or Deselect all Checkboxes using jQuery - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <label><input type="checkbox" id="checkAll" /> Select All</label><br /><br /> <label><input class="chk" type="checkbox" name=item[] value="1" /> Item 1</label><br /> <label><input class="chk" type="checkbox" name=item[] value="2" /> Item 2</label><br /> <label><input class="chk" type="checkbox" name=item[] value="3" /> Item 3</label><br /> <label><input class="chk" type="checkbox" name=item[] value="4" /> Item 4</label><br /> <label><input class="chk" type="checkbox" name=item[] value="5" /> Item 5</label> </form> </body> </html> |
That’s it for today.
Thank you for reading. Happy Coding..!!
