Check whether a specific radio button is checked with JavaScript/jQuery
This post will discuss how to check whether a specific radio button is checked in JavaScript and jQuery.
1. Using jQuery
The idea is to use the .val() method to get the value of matched radio elements. The following program bind to the change event handler of radio button using .change(handler) method and display an alert whenever email value is selected.
jQuery
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $('input:radio[name="contact"]').change(function() { if ($(this).val() === 'email') { alert('Email is selected'); } }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> </div> </body> </html> |
Instead of binding to the change event handler of a radio button, you can bind to click event of a submit button. Here’s a working code:
jQuery
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $('#submit').click(function() { if ($('input:radio[name="contact"]:checked').val() === 'email') { alert('Email 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
In plain JavaScript, you can loop through the radio button group and find the relevant checked button.
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 && radio.value === 'email') { alert('Email 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> |
Alternatively, you can use the querySelector() method to get the selected radio button.
JS
|
1 2 3 4 5 6 |
document.getElementById('submit').onclick = function() { var radio = document.querySelector('input[type=radio][name=contact]:checked'); if (radio.value === 'email') { alert('Email 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> |
That’s all about determining whether a specific radio button is checked 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 :)