How to check which radio button is selected in JavaScript
What is a radio button?
A radio button allows a user to select a single option from a predefined list of options. Its use can go from filling forms to selecting games and much more.
As a JavaScript developer, how do we let users know which radio button has been selected?
Example
Let’s say we need to know the educational background of the applicant. We come up with the four levels—primary, secondary, degree, or masters.
For this, we need four radio buttons for the educational backgrounds, and a submit button that returns the value of the checked radio button.
Let's create the radio buttons and the submit button in HTML.
<html><head></head><body><div><h2>Please Select Your Education Level</h2><input type="radio" name="button" id="firstselection" value="Primary">Primary<input type="radio" name="button" id="secondselection" value="Secondary">Secondary<input type="radio" name="button" id="thirdselection" value="Degree">Degree<input type="radio" name="button" id="fourthselection" value="Masters">Masters</div><div><button type="submit" onclick="display()">Submit </button></div><div id="message"></div></body></html>
Explanation
Lines 7–14: We create four radio buttons that allow users to select their education level. The input property,
id, is essential to allow the JavaScript DOM to access the input usingdocument.getElementById. Remember to use the samenameattribute for all buttons to ensure that two radio buttons cannot get selected at once.Lines 15–17: We create a submit button to submit the value of selected radio button.
Line 16: The
onclickattribute of the button allows us to execute thedisplay()function of JavaScript once clicked.
Finding the selected radio button
We will use the JavaScript Document Object Model (DOM) to choose the radio id for each input and use the if/else statements to find the selected radio button.
function display(){if(document.getElementById('firstselection').checked) {document.getElementById('message').innerHTML = document.getElementById('firstselection').value + ' '+ "level is selected"}else if(document.getElementById('secondselection').checked) {document.getElementById('message').innerHTML = document.getElementById('secondselection').value +' ' + "level is selected"}else if(document.getElementById('thirdselection').checked) {document.getElementById('message').innerHTML = document.getElementById('thirdselection').value +' ' + "level is selected"}else if(document.getElementById('fourthselection').checked) {document.getElementById('message').innerHTML = document.getElementById('fourthselection').value +' ' + "level is selected"}else{document.getElementById('message').innerHTML = "No educational background has been selected"}}
Explanation
Line 1: We define the
display()function to find the selected radio button.Lines 2–13: We use the JavaScript DOM
document.getElementById()function to access the radio input and then use theif/elsestatements to find the value of selected radio button.Lines 14–16: If the user clicks the submit button without selecting a radio button, they will be notified by the message "No educational level has been selected."
Playground
We have learned to implement the JavaScript function that uses the if/else conditional statements and JavaScript DOM to return the value of selected radio button.
