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 Get Value of Selected Radio Button Using JavaScript?
One of the most important HTML components when attempting to design a form is the radio button. The user can only select one choice from the alternatives shown to him by the radio buttons.
Typically, we just utilize the element's value attribute in JavaScript to retrieve an element's value from an HTML webpage. But with radio buttons, we can't do that. The reason is that getting the values of individual radio buttons is a bad idea.
Let's get started with the article to learn how to get the value of a selected radio button. For this, we are going to use the checked attribute.
Using checked attribute
The checked attribute is a Boolean attribute. When present, it indicates that an <input> element should be pre-selected (checked) when the page loads. The checked attribute can be used with both checkbox and radio input types. With JavaScript, the checked attribute can also be modified after the page has loaded.
Syntax
Following is the syntax for checked attribute −
<input checked>
Let's look at some examples to get a better idea of how to get the value of a selected radio button
Example
In the following example, we are running the script for getting the value of the selected radio button.
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1 ">
<center>
<div id="tutorial">
<p>Choose The Course</p>
<div>
<input type="radio" id="java" name="course" value="java" />
<label for="java">JAVA</label>
<input type="radio" id="html" name="course" value="html" />
<label for="html">HTML</label>
</div>
<button id="tutorial1">Click</button>
</div>
</center>
<script>
document.getElementById("tutorial1").onclick = function () {
var radioButtonGroup = document.getElementsByName("course");
var checkedRadio = Array.from(radioButtonGroup).find(
(radio) => radio.checked
);
alert("The Selected Course Was : " + checkedRadio.value);
};
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of text along with radio buttons and a click button. When the user selects the radio button and clicks, a pop-up window displays the value you have chosen.
Example
Considering the following example, where we are running the script to get the value of the selected radio button.
<!DOCTYPE html>
<html>
<body style="text-align:center;background-color:#D2B4DE;">
<p>
Choose Value And Click Submit Button
</p>
Choose:
<input type="radio" name="Choose" value="LogIn">Login In
<input type="radio" name="Choose" value="SignUp">Sign Up
<br>
<button type="button" onclick="getvalue()">
Submit
</button>
<br>
<div id="result"></div>
<script>
function getvalue() {
var ele = document.getElementsByName('Choose');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
document.getElementById("result").innerHTML = "Choosen: "+ele[i].value;
}
}
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the text along with a radio button and a submit button. When the user selects the radio button and clicks the submit button, the event gets triggered and displays the chosen value.
Using the querySelector() function
The document's first element that matches the given selector or set of selectors is returned by the querySelector() function. Null is returned if no matches were discovered.
Syntax
Following is the syntax for querySelector() -
querySelector(selectors)
Example
Execute the below code and observe how we are getting the value of the selected radio button.
<!DOCTYPE html>
<html>
<body style="text-align:center;background-color:#D6EAF8 ;">
<div id="tutorial">
<p>Choose The Gender:</p>
<div>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="Female">Female</label>
<input type="radio" id="others" name="gender" value="Others">
<label for="Others">Others</label>
</div>
<button id="click">Submit</button>
</div>
<script>
document.getElementById('click').onclick = function() {
var selected = document.querySelector('input[type=radio][name=gender]:checked');
alert(selected.value);
}
</script>
</body>
</html>
When the script is run, it will generate an output consisting of text along with a radio button and a submit button. When the user chooses the values and clicks the button, a pop-up window displaying the chosen.
3K+ Views
