Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Get Value of Selected Radio Button Using JavaScript
To get value of selected radio button using JavaScript is useful to a user in various ways such as collecting surveys data, in quiz or dynamic UI updates like changing to dark or light theme. We will be discussing two approaches to get the selected radio button value.
In this article, we are having three radio buttons with their labels and our task is to get value of selected radio button using JavaScript.
Approaches to Get Value of Selected Radio Button
Here is a list of approaches to get value of selected radio button using JavaScript which we will be discussing in this article with stepwise explaination and complete example codes.
Using checked Property
To get value of selected radio button using JavaScript, we have used checked property. It returns a boolean value true if the checkbox is checked, and false otherwise.
- We have used input tag with type attribute to create radio buttons and used a button that triggers getvalue() function to get the value of radio buttons.
- Then we have used getElementsByName() to get all the radio button having name specified with name attribute in input tag.
- Then we have used for loop to iterate over each radio button and used if/else condition to check if radio button is checked using checked property.
- Then we have printed the value of selected radio button using div, getElementById() method and innerHTML property.
Example
Here is a complete example code implementing above mentioned steps to get value of selected radio button using checked property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Getting Value of Selected Radio Button Using JavaScript
</title>
</head>
<body>
<h2>
Getting Value of Selected Radio Button Using JavaScript
</h2>
<p>
In this example, we have used <strong>checked</strong>
property to get the value of the selected radio button
using JavaScript.
</p>
color:
<br><br>
<input type="radio" name="color" value="Red">Red
<br>
<input type="radio" name="color" value="Green">Green
<br>
<input type="radio" name="color" value="Blue">Blue
<br><br>
<button type="button" onclick="getvalue()">
Submit
</button>
<br><br>
<div id="result"></div>
<script>
function getvalue() {
let ele = document.getElementsByName('color');
for (i = 0; i < ele.length; i++) {
if (ele[i].checked)
document.getElementById("result")
.innerHTML="Selected color: " + ele[i].value;
}
}
</script>
</body>
</html>
Using formData Constructor
In this approach to get value of selected radio button using JavaScript, we have used formData constructor.
- We have used form tag to create a form with three radio buttons and their respective labels.
- We have used getElementById() method to sdelect the form and created a form object formData.
- Then we have used get() method to get the vslue of radio buttons value specified in name attribute of input tag. This will return the value of the currently selected radio button.
- At the end, we have used if/else statement to display the value in both cases i.e when a radio button is selected and when radio button is not selected.
Example
Here is a complete example code implementing above mentioned steps to get value of selected radio button using formData constructor.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Getting Value of Selected Radio Button Using JavaScript
</title>
</head>
<body>
<h2>
Getting Value of Selected Radio Button Using JavaScript
</h2>
<p>
In this example, we have used <strong>formData</strong>
to get the value of the selected radio button using
JavaScript.
</p>
<h3>Select Your Color:</h3>
<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="radioValue()">
Submit
</button>
</form>
<br>
<div id="output"></div>
<script>
function radioValue() {
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>
Conclusion
In this article, to get value of selected radio button using JavaScript we have discussed two different approaches which are: by using checked property and by using formData() constructor.
8K+ Views
