Check or uncheck all checkboxes with JavaScript/jQuery
This post will discuss how to check/uncheck all checkboxes in JavaScript and jQuery.
1. JavaScript Solution
A checkbox’s state can be changed using the HTMLInputElement’s checked attribute. To check or uncheck all checkboxes, you can set the checked attribute individually for each checkbox.
JS
|
1 2 3 4 5 6 |
document.getElementById('select').onclick = function() { var checkboxes = document.getElementsByName('vehicle'); for (var checkbox of checkboxes) { checkbox.checked = true; } } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike"> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <button id="select">Select All</button> </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } button { margin-top: 10px; padding: 2 2; font: 15px 'Exo 2', sans-serif; } |
2. jQuery Solution
With jQuery, you can do like:
JS
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $('#select').click(function() { $(':checkbox').each(function() { this.checked = true; }); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike"> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <button id="select">Select All</button> </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } button { margin-top: 10px; padding: 2 2; font: 15px 'Exo 2', sans-serif; } |
Alternatively, you can simulate a mouse-click for all checkboxes using jQuery’s click() method.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#select').click(function() { $(":checkbox").click(); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike"> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <button id="select">Select All</button> </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } button { margin-top: 10px; padding: 2 2; font: 15px 'Exo 2', sans-serif; } |
Another solution is to set the checked attribute using the prop() method.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#select').click(function() { $(":checkbox").prop('checked', true); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike"> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <button id="select">Select All</button> </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } button { margin-top: 10px; padding: 2 2; font: 15px 'Exo 2', sans-serif; } |
That’s all about checking or uncheck all checkboxes with JavaScript and Query.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)