Get value of a checkbox with JavaScript/jQuery
This post will discuss how to get the value of a checkbox in JavaScript and jQuery.
1. Using jQuery
With jQuery, you can use the .val() method to get the value of the desired input checkbox. For example:
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { alert($('#male').val()); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html> <body> <p>Choose your gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male" checked> <label for="male">male</label> </div> <div> <button id="submit">Get Value</button> </div> <br> </body> </html> |
To get the value from a checked checkbox, you can use the :checked to select the right elements.
JS
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { $('#submit').click(function() { if ($('#male').is(":checked")) { alert($('#male').val()); } else if ($('#female').is(":checked")) { alert($('#female').val()); } }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html> <body> <p>Choose your gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male" checked> <label for="male">male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">female</label> </div> <div> <button id="submit">Get Value</button> </div> <br> </body> </html> |
Or even better
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { alert($("input[type=checkbox][name=gender]:checked").val()); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html> <body> <p>Choose your gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male" checked> <label for="male">male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">female</label> </div> <div> <button id="submit">Get Value</button> </div> <br> </body> </html> |
Note when nothing is selected, it returns undefined.
2. Using JavaScript
In pure JavaScript, you can do like:
JS
|
1 2 3 4 5 6 7 8 |
document.getElementById('submit').onclick = function() { if (document.getElementById('male').checked) { alert(document.getElementById('male').value); } else if (document.getElementById('female').checked) { alert(document.getElementById('female').value); } } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html> <body> <p>Choose your gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male" checked> <label for="male">male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">female</label> </div> <div> <button id="submit">Get Value</button> </div> <br> </body> </html> |
Using querySelector():
JS
|
1 2 3 |
document.getElementById('submit').onclick = function() { alert(document.querySelector('input[type=checkbox][name=gender]:checked').value); } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html> <body> <p>Choose your gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male" checked> <label for="male">male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">female</label> </div> <div> <button id="submit">Get Value</button> </div> <br> </body> </html> |
That’s all about getting the value of a checkbox 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 :)