Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Get Value of Selected Radio Button Using JavaScript?
Getting the value of a selected radio button using JavaScript is essential for forms, surveys, quizzes, and dynamic UI updates. This article demonstrates two reliable approaches to retrieve radio button values programmatically.
We'll explore how to get the selected radio button value from a group of radio buttons using the checked property and the FormData constructor.
Approaches to Get Value of Selected Radio Button
Here are the two main approaches to get the value of a selected radio button using JavaScript:
Using checked Property
The checked property returns true if a radio button is selected, and false otherwise. This approach involves iterating through all radio buttons with the same name and checking which one is selected.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Value of Selected Radio Button</title>
</head>
<body>
<h2>Select Your Favorite Color:</h2>
<input type="radio" name="color" value="Red" id="red">
<label for="red">Red</label><br>
<input type="radio" name="color" value="Green" id="green">
<label for="green">Green</label><br>
<input type="radio" name="color" value="Blue" id="blue">
<label for="blue">Blue</label><br><br>
<button type="button" onclick="getSelectedValue()">Get Selected Value</button>
<br><br>
<div id="result"></div>
<script>
function getSelectedValue() {
const radioButtons = document.getElementsByName('color');
let selectedValue = '';
for (let i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
selectedValue = radioButtons[i].value;
break;
}
}
if (selectedValue) {
document.getElementById("result").innerHTML = "Selected color: " + selectedValue;
} else {
document.getElementById("result").innerHTML = "No color selected";
}
}
</script>
</body>
</html>
Using FormData Constructor
The FormData constructor provides a cleaner approach by automatically collecting form data, including the selected radio button value. This method is more modern and requires less code.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Radio Button Value with FormData</title>
</head>
<body>
<h2>Select Your Favorite Color:</h2>
<form id="colorForm">
<label>
<input type="radio" name="color" value="Red"> Red
</label><br>
<label>
<input type="radio" name="color" value="Green"> Green
</label><br>
<label>
<input type="radio" name="color" value="Blue"> Blue
</label><br><br>
<button type="button" onclick="getRadioValue()">Get Selected Value</button>
</form>
<br>
<div id="output"></div>
<script>
function getRadioValue() {
const form = document.getElementById('colorForm');
const formData = new FormData(form);
const selectedColor = formData.get('color');
if (selectedColor) {
document.getElementById('output').innerHTML = "Selected color: " + selectedColor;
} else {
document.getElementById('output').innerHTML = "No color selected";
}
}
</script>
</body>
</html>
Comparison
| Method | Code Complexity | Performance | Browser Support |
|---|---|---|---|
| checked Property | Requires loop iteration | Good | All browsers |
| FormData Constructor | Simple and clean | Excellent | Modern browsers (IE10+) |
Key Points
- Always use the same
nameattribute for radio buttons in the same group - The
checkedproperty approach works in all browsers -
FormDatais more efficient for complex forms with multiple inputs - Handle cases where no radio button is selected to avoid errors
Conclusion
Both approaches effectively retrieve selected radio button values. Use the checked property for maximum browser compatibility, or FormData for cleaner, modern code in contemporary applications.
9K+ Views
