Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to check whether a radio button is selected with JavaScript?
In the HTML, the radio buttons allow developers to create multiple options for a choice. Users can select any option, and we can get its value and know which option users have selected from the multiple options.
So, it is important to check which radio button the user selects to know their choice from multiple options. Let’s understand it via real-life examples. When you fill out any form and ask to choose a gender, you can see they give you three options, and you can select only one.
In this tutorial, we will learn two approaches to checking whether a radio button is selected using JavaScript.
Using the checked property of the radio button
We can access the radio element in JavaScript using various methods. After that, we can use its checked property to check whether the selected radio button is checked. If the value of the checked property is true, it means the radio button is selected; otherwise, it’s not selected.
Syntax
Users can follow the syntax below to check whether the radio button is selected using the checked property of the radio element.
<input type = "radio" name = "radio" value = "male" id = "radio1" > Male</input>
<script>
let radio1 = document.getElementById('radio1');
if(radio1.checked){
// radio1 is checked
}
</script>
In the above syntax, we have accessed the radio button using its id and used the checked attribute to check whether the radio button is selected in the if-statement.
Example
In the example below, we have created three radio buttons containing different values, such as male, female, and others. In JavaScript, we have accessed each radio button by its id and checked the value of every radio button's ‘checked’ property.
When the user selects any radio button and clicks on the button, they see a message showing the value of the selected radio button.
<html>
<body>
<h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected.</h3>
<input type = "radio" name = "radio" value = "male" id = "radio1" > Male </input> <br>
<input type = "radio" name = "radio" value = "female" id = "radio2" > Female </input><br>
<input type = "radio" name = "radio" value = "other" id = "radio3" /> Other </input>
<p id = "output"> </p>
<button onclick = "checkRadio()"> Check radio </button>
<script>
let output = document.getElementById("output");
function checkRadio(){
// accessing the radio buttons
let radio1 = document.getElementById('radio1');
let radio2 = document.getElementById('radio2');
let radio3 = document.getElementById('radio3');
// checking if any radio button is selected
if(radio1.checked){
output.innerHTML = "The radio button with value " + radio1.value + " is checked!";
}
if(radio2.checked){
output.innerHTML = "The radio button with value " + radio2.value + " is checked!";
}
if(radio3.checked){
output.innerHTML = "The radio button with value " + radio3.value + " is checked!";
}
}
</script>
</body>
</html>
Example
The example below is almost the same as the one above, but the difference is that we are accessing all radio buttons using their name at once. The getElementByName() method returns all radio elements with the name radio.
After that, we used the for-of loop to iterate through the array of radio buttons and check for every radio button using the ‘checked’ property whether the radio button is selected.
<html>
<body>
<h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected</h3>
<input type = "radio" name = "radio" value = "10" id = "radio1"> 10 </input> <br>
<input type = "radio" name = "radio" value = "20" id = "radio2"> 20 </input> <br>
<input type = "radio" name = "radio" value = "30" id = "radio3" /> 30 </input>
<p id = "output"> </p>
<button onclick = "getSelectedRadio()"> Check radio </button>
<script>
let output = document.getElementById("output");
function getSelectedRadio() {
let radioButtons = document.getElementsByName('radio');
for (let radio of radioButtons) {
if (radio.checked) {
output.innerHTML = "The radio button is selected and it's value is " + radio.value;
}
}
}
</script>
</body>
</html>
Use the querySelector() method to check whether a radio button is selected
Programmers can use JavaScript's querySelector() method to select any HTML element. Here, we have used the querySelector() method to select only the checked radio button. If no radio button is selected, it returns a null value.
Syntax
Users can follow the syntax below to use the querySelector() method to check whether the radio button is selected.
var selected = document.querySelector('input[name="year"]:checked');
In the above syntax, 'year' is the name of the group of radio buttons, and it returns any radio button which belongs to the ‘year’ group and is checked.
Example
In the example below, we created three radio buttons providing three different choices to the users. When users click on the Check selected year button, it invokes the getSelectedRadio() function, which uses the querySelector() method to select the radio button with the name ‘year’ and is checked from the DOM.
Users can click the button without selecting any radio button and observe the output.
<html>
<body>
<h3>Using the <i> querySelector() method </i> to check whether a radio button is selected.</h3>
<input type = "radio" name = "year" value = "1999" id = "radio1"> 1999 </input><br>
<input type = "radio" name = "year" value = "2021" id = "radio2"> 2021 </input><br>
<input type = "radio" name = "year" value = "2001" id = "radio3" /> 2001 </input>
<p id="output"></p>
<button onclick="getSelectedRadio()">Check selected year</button>
<script>
let output = document.getElementById("output");
function getSelectedRadio() {
var selected = document.querySelector(
'input[name="year"]:checked');
if (selected) {
output.innerHTML += "Radio button is selected."
} else {
output.innerHTML += "Not any radio button is selected!"
}
}
</script>
</body>
</html>
Users learned two different methods to get the checked radio buttons using JavaScript. The best way to do this is to use the querySelector() method, as we need to write only a single line of code.
27K+ Views
