For example, your web application accepts either email or phone number and you want the user to select one and not both. Radio buttons come in handy in achieving this task. First, we will define radio buttons in HTML and then go towards JavaScript so that we can take input with radio buttons.
HTML
In the above HTML code, we used two radio buttons and gave the name of the contact. It is necessary to give the same name to the same group of radio buttons so that only one can be selected at one time. We also used labels to label our input radio buttons. We will see the following output in our browser when we run the above code:
We can also see that only one radio button can be selected at any given time. Before going towards the JavaScript part, let us initiate a submit in HTML as well so that we can later listen for events on this button.
We initiated a button and gave it an onclick event so that when the user clicks on the submit button, the handleClick() function will start executing. In the end, we referenced our JavaScript filename with the help of script tag and using the src attribute passed the file name which is code.js.
JavaScript
Now that we have defined two radio buttons in HTML, let us take the next step towards getting input from the radio button hence it is necessary to first determine which radio button is active or selected. For this purpose, we will use querySelectorAll() which will select all the radio buttons with the name contact.
constradioButtons= document.querySelectorAll('input[name="contact"]');
letselectedValue;
for (constrbofradioButtons) {
if (rb.checked) {
selectedValue = rb.value;
break;
}
}
if(selectedValue){
alert(selectedValue);
}
else{
alert("Please Select an option");
}
}
In the above JavaScript, the handleClick() function is created at the start which is called from the HTML submit button. After this, using the querySelectorAll(”input[name=” contact”]”) we select all the radio buttons that have the name of the contact and save the reference of all the radio buttons in the variable radioButtons. After which, we created a loop that will iterate through every radio button and will check whether any radio button is checked or not which means the radio button is selected or not. If a radio button is selected then it will store the value of that radio button in the selectedValue variable.
Once the loop ends, we unify the if/else statement which checks whether the variable selectedValue is empty or not. If it has some value then it will alert that value, otherwise an alert of Please Select an option will be shown to the user.
We can see in the above output that when we didn’t select a radio button the alert showed us the message that Please Select an option. However, when we select the Email radio button, we see the value of email and when we select the Phone radio button then we see the value of the phone.
Conclusion
To set up a group of related options, and selecting just one at one given time, radio buttons are used. Radio buttons are initiated with <input> elements of HTML and the checked property is used in JavaScript to see whether a radio button has been selected or not. Radio buttons come in very handy when there are multiple options available and the developer wants the user to select only one. In this post, we learn how to take input with Radio buttons in JavaScript.
