Count number of checkboxes with JavaScript/jQuery
This post will discuss how to count the total number of checked checkboxes in JavaScript and jQuery.
1. Using jQuery
With jQuery, you can use the $('input[type="checkbox"]'), which returns the list of all checkboxes.
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#select').click(function() { var checkboxes = $('input[type="checkbox"]').length; alert(checkboxes); }) }); |
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 |
<!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="scooter" name="vehicle" value="scooter"> <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="select">Select Two Wheelers</button> </div> </body> </html> |
It can be shortened to $('input:checkbox')
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#select').click(function() { var checkboxes = $('input:checkbox').length; alert(checkboxes); }) }); |
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 |
<!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="scooter" name="vehicle" value="scooter"> <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="select">Select Two Wheelers</button> </div> </body> </html> |
To get a list of all checked checkboxes, you can use the :checked selector like $('input:checkbox:checked').
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#select').click(function() { var checkboxes = $('input:checkbox:checked').length; alert(checkboxes); }) }); |
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 |
<!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="scooter" name="vehicle" value="scooter"> <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="select">Select Two Wheelers</button> </div> </body> </html> |
Alternatively, to get all unchecked checkboxes, you can use the :not() pseudo-class, which selects any elements that don’t match the specified selectors.
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#select').click(function() { var checkboxes = $('input:checkbox:not(":checked")').length; alert(checkboxes); }) }); |
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 |
<!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="scooter" name="vehicle" value="scooter"> <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="select">Select Two Wheelers</button> </div> </body> </html> |
2. Using JavaScript
With pure JavaScript, you can use the Document method querySelectorAll(), which returns a list of the document’s elements that match the specified group of selectors.
JS
|
1 2 3 4 |
document.getElementById('select').onclick = function() { var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked'); alert(checkboxes.length); } |
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 |
<!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="scooter" name="vehicle" value="scooter"> <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="select">Select Two Wheelers</button> </div> </body> </html> |
That’s all about counting the number of checkboxes in 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 :)