Get value of selected radio button with JavaScript/jQuery
This post will discuss how to get the value of the selected radio button in JavaScript and jQuery.
To get the selected radio button, you can use the :checked CSS pseudo-class selector, representing any radio (<input type="radio">) that is checked. We can use this in many ways with jQuery and plain JavaScript.
1. Using jQuery
1. The .val() method can be used to get the value of matched radio elements. When no options are selected, it returns an undefined value.
The following code uses .is() inside an event handler and returns true if any radio button is selected.
JS
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('button').click(function() { var value = $("input[type=radio][name=contact]:checked").val(); if (value) { alert(value); } else { alert('Nothing is selected'); } }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
2. jQuery’s .filter() method takes a selector expression and matches it against the current set of elements.
JS
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('button').click(function() { var radio = $("input[type=radio][name=contact]").filter(":checked")[0]; if (radio) { alert(radio.value); } else { alert('Nothing is selected'); } }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
2. Using JavaScript
With JavaScript, you can loop through each <radio> button using for…of loop:
JS
|
1 2 3 4 5 6 7 8 9 |
document.getElementById('submit').onclick = function() { var radios = document.getElementsByName('contact'); for (var radio of radios) { if (radio.checked) { alert(radio.value); } } } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
This can be shortened to the following code:
JS
|
1 2 3 4 5 |
document.getElementById('submit').onclick = function() { var radios = document.getElementsByName("contact"); var selected = Array.from(radios).find(radio => radio.checked); alert(selected.value); } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
Alternatively, you can use the querySelector() method to access the matched element.
JS
|
1 2 3 4 |
document.getElementById('submit').onclick = function() { var selected = document.querySelector('input[type=radio][name=contact]:checked'); alert(selected.value); } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
That’s all about getting the value of the selected radio button 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 :)