How to take input with Radio Buttons in JavaScript

JavaScript is a programming language that gives our web applications and web pages the ability to think and act by making them interactive. Javascript offers us radio buttons that are used to set up a group of related options with just one radio button chosen at a time. Radio buttons are mostly used in forms and used with the <input> element of HTML. Radio buttons come in very handy when the developer wants the user to select just one option from the given multiple options.

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.


<p>Choose your preferred option</p>

<input type="radio" name="contact" value="email" />

<label for="email">Email</label>

<input type="radio" name="contact" value="phone" />

<label for="phone">Phone</label>

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.


<p>Choose your preferred option</p>

<input type="radio" name="contact" value="email"/>

<label for="email">Email</label>

<input type="radio" name="contact" value="phone"/>

<label for="phone">Phone</label>

<button onclick="handleClick()">Submit</button>

<script src="code.js"></script>


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.


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"]');
for (constrbofradioButtons) {
if (rb.checked) {
selectedValue = rb.value;
    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.


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.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.