Retrieve checked checkboxes values with JavaScript/jQuery
This post will discuss how to retrieve values of checked checkboxes in JavaScript and jQuery.
1. Using JavaScript
In pure JavaScript, you can use the checked property to get the checked state of a checkbox. The following code demonstrates this with the getElementsByName() method.
JS
|
1 2 3 4 5 6 7 8 9 |
document.getElementById('select').onclick = function() { var checkboxes = document.getElementsByName('vehicle'); for (var checkbox of checkboxes) { if (checkbox.checked) { document.body.append(checkbox.value + ' '); } } } |
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 |
<!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="select">Get Checked Checkboxes</button> </div> <br> </body> </html> |
Alternatively, you can use the querySelectorAll() method with :checked selector.
JS
|
1 2 3 4 5 6 |
document.getElementById('select').onclick = function() { var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked'); for (var checkbox of checkboxes) { document.body.append(checkbox.value + ' '); } } |
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 |
<!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="select">Get Checked Checkboxes</button> </div> <br> </body> </html> |
The above code will return all checked checkboxes in the document. To select the only group of checkboxes with a specific name, you can do like:
JS
|
1 2 3 4 5 6 |
document.getElementById('select').onclick = function() { var checkboxes = document.querySelectorAll('input[name="vehicle"]:checked'); for (var checkbox of checkboxes) { document.body.append(checkbox.value + ' '); } } |
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 |
<!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="select">Get Checked Checkboxes</button> </div> <br> </body> </html> |
2. Using jQuery
With jQuery, you can use an attribute selector like:
JS
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $('#select').click(function() { $('input[type="checkbox"]:checked').each(function() { // $(':checkbox:checked') document.body.append(this.value + ' '); // $(this).val() }); }); }); |
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 |
<!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="select">Get Checked Checkboxes</button> </div> <br> </body> </html> |
To join the values of checked checkboxes as a single string separated with a delimiter, you can do like:
JS
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function() { $('#select').click(function() { var values = $('input[type="checkbox"]:checked').map(function() { return $(this).val(); }).get().join(','); document.body.append(values); }) }); |
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 |
<!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="select">Get Checked Checkboxes</button> </div> <br> </body> </html> |
That’s all about retrieving checked checkboxes values 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 :)