Normally, when we want to get the value of an element from an HTML webpage, we simply use the value property of that element in Javascript. But we can’t do that with radio buttons. The reason is that it is not a good practice to fetch the values of individual radio buttons. Therefore, we only want one value and that is of the selected radio button
The process of fetching the value of a selected radio button includes the following steps:
- First: Get a reference to the group of radio buttons in javascript
- Second: From the list of radio buttons, filter the one with the “checked” property
- Third: Get the value attribute of the filtered radio button
Let’s create an example to showcase these steps.
Step 1: Set-up an HTML webpage
Create an HTML webpage with the following lines inside it:
<div id="demoRadio">
<p>What would you like to learn?</p>
<div>
<input type="radio" id="Guitar" name="instrument" value="Guitar" />
<label for="Guitar">Guitar</label>
<input type="radio" id="Violin" name="instrument" value="Violin" />
<label for="Violin">Violin</label>
<input type="radio" id="Cajon" name="instrument" value="Cajon" />
<label for="Cajon">Cajon</label>
</div>
<button id="learn">Learn</button>
</div>
</center>
The following things are happening in the code mentioned above:
- We are creating a container in which we will put our radio buttons and the “Learn” button
- Then we are asking the user about the instrument he wants to learn
- The choices are given in the form of radio buttons
- Each radio button has its own unique id and value but the same name to group them
- Then a <label> tag is added for each radio button
- A button has been added in the webpage, for submitting the user’s choice.
Fire up the HTML webpage, and you will get this output on your browser.
We have radio buttons, and our learn button in the middle of the webpage.
Step 2: Write Javascript code to display the user’s choice
We want to execute a function in the script file upon clicking the “Learn” button. Therefore, we add the following lines:
// Next code would come inside her
};
Inside this function, get the DOM reference of our radio buttons group by using the following line
After that, filter this group of radio buttons to find the one that is checked and store it inside another variable using the following line
Lastly, prompt the user about the instrument he\she wants to learn using the alert function
The complete script file looks like this
var radioButtonGroup = document.getElementsByName("instrument");
var checkedRadio = Array.from(radioButtonGroup).find(
(radio) => radio.checked
);
alert("You have selected : " + checkedRadio.value);
};
Step 3: Testing the script
Refresh the webpage, select a radio button and then click on the button that says “Learn”. You should get the following output:
You have successfully fetched the value from a checked radio button and alerted the user about his choice.
Wrap-up
To get the value of a selected radio button in Javascript, we have to follow a set of steps. First step is to get a javascript reference to radio buttons with the same name. After that, we want to filter the radio button that has the checked property marked. After that, use the store radio button to get the value using the value attribute of the HTML element. Then you can work with the fetched value.
