Implement toggle for checkbox with JavaScript/jQuery
This post will discuss how to implement toggle for checkbox using JavaScript and jQuery.
1. Using JavaScript
With pure JavaScript, you can use the checkbox’s checked property to set the checked state of a checkbox. However, you need to toggle the checked property individually for each checkbox to implement the toggle functionality.
This can be done using getElementsByName() or querySelectorAll() method:
⮚ Using Document.getElementsByName()
JS
|
1 2 3 4 5 6 |
document.getElementById('toggle').onclick = function() { var checkboxes = document.getElementsByName('vehicle'); for (var checkbox of checkboxes) { checkbox.checked = !checkbox.checked; } } |
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 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike" checked> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="scooter" name="vehicle" value="scooter" checked> <label for="scooter">Scooter</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <input type="checkbox" id="auto" name="vehicle" value="auto"> <label for="auto">Auto</label> </div> <div> <button id="toggle">Toggle All</button> </div> <br> </body> </html> |
⮚ Using Document.querySelectorAll()
JS
|
1 2 3 4 5 6 |
document.getElementById('toggle').onclick = function() { var checkboxes = document.querySelectorAll('input[type="checkbox"]'); for (var checkbox of checkboxes) { checkbox.checked = !checkbox.checked; } } |
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 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike" checked> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="scooter" name="vehicle" value="scooter" checked> <label for="scooter">Scooter</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <input type="checkbox" id="auto" name="vehicle" value="auto"> <label for="auto">Auto</label> </div> <div> <button id="toggle">Toggle All</button> </div> <br> </body> </html> |
2. Using jQuery
With jQuery, you can do like:
JS
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $('#toggle').click(function() { $(':checkbox').each(function() { this.checked = !this.checked; }); }) }); |
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 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike" checked> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="scooter" name="vehicle" value="scooter" checked> <label for="scooter">Scooter</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <input type="checkbox" id="auto" name="vehicle" value="auto"> <label for="auto">Auto</label> </div> <div> <button id="toggle">Toggle All</button> </div> <br> </body> </html> |
Alternatively, you can simply simulate a mouse-click for all checkboxes using jQuery’s click() method. This is equivalent to calling .trigger('click').
JS
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $('#toggle').click(function() { $(':checkbox').each(function() { this.click(); }); }); }); |
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 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike" checked> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="scooter" name="vehicle" value="scooter" checked> <label for="scooter">Scooter</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <input type="checkbox" id="auto" name="vehicle" value="auto"> <label for="auto">Auto</label> </div> <div> <button id="toggle">Toggle All</button> </div> <br> </body> </html> |
That’s all about implementing toggle for checkbox using JavaScript and jQuery.
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 :)