How To Get Selected Radio Button Value In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of how to get selected radio button value in JavaScript, you can use the checked property of radio buttons to find out which radio button is selected, then create a user-defined function to get the value of the selected radio button.
In radio buttons, the checked property determines whether they are enabled or unchecked.
Radio buttons do not display their value property to users. The value property is only used during form submission.
On submission, radio buttons with the value property are checked to receive both their name and value. Radio buttons with the value property unchecked do not receive values.
There is an icon called a radio button that takes input from the user. The main purpose of radio buttons is to select only one selection from a list of options, which is most often used in GUI forms.
When you choose two or more radio buttons, you can only mark/check one radio button. Our goal here is to teach you JavaScript's methods for checking a radio button.
To do this, we will first design a form that contains radio buttons using HTML, and then implement the radio buttons using JavaScript programming.
You can retrieve the checked element by using the document.getElementById('id').checked method.
Upon clicking the radio button, it will return a Boolean value that indicates whether it is selected.
Step By Step Guide On How To Get Selected Radio Button Value In JavaScript :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Radio Button</title>
</head>
<body>
<p>TalkersCode</p>
<div>
<input type="radio" name="language" value="HTML" id="html">
<label for="HTML">HTML</label>
</div>
<div>
<input type="radio" name="language" value="CSS" id="css">
<label for="CSS">CSS</label>
</div>
<p>
<button id="btn">Show Selected Value</button>
</p>
<p id="output"></p>
<script>
const btn = document.querySelector('#btn');
const radioButtons = document.querySelectorAll('input[name="language"]');
btn.addEventListener("click", () => {
let selectedLanguage;
for (const radioButton of radioButtons) {
if (radioButton.checked) {
selectedLanguage = radioButton.value;
break;
}
}
// show the output:
output.innerText = selectedLanguage ? You selected ${selectedLanguage}: You haven't selected any Language;
});
</script>
</body>
</html>
- We begin by writing <HTML>, which tells the browser what HTML version we're using. An HTML document's beginning uses HTML tags.
- Using the <head> tag, we will explain the heading of the project.
- Once the title has been determined, we open the project name.
- After closing the title, head, and body, we can begin the creation of the website.
- Then we Added a paragraph for the creation of the program.
- Our next step is to create a radio button with CSS for the creation of a stylesheet.
- Then we add an Html page with a <script> tag for creating the script.
- In the following step, we create a radio button by using a const variable.
- After that we closes </script></body> and </html>.
Conclusion :-
A Javascript programmer typically uses the value property of HTML elements to determine their values. A radio button's value should not be fetched individually.
This means that we only need to know one value, namely the value of the selected radio button.
I hope this article on how to get selected radio button value in JavaScript helps you and the steps and method mentioned above are easy to follow and implement
About Dikshita
