How to Loop Through a Group of Radio Buttons in JavaScript?

To loop through a group of radio buttons, you can use the getElementsByName() method of the DOM. The getElementsByName() method takes in a single string parameter which is the name of the group and returns an array containing all the nodes in the specified group.

Once the node list is fetched, you can run a for or foreach loop over the node list and check which radio button is selected and which is not.

Let me show you this with an example.

Let’s say we have a radio button group named 'fruits', which has four radio buttons, and each radio button represents a fruit name. We have by default kept the second option selected:

<div>
    Apple: <input type=radio name="fruits" value="apple">
    Mango: <input type=radio name="fruits" checked value="mango">
    Orange: <input type=radio name="fruits" value="orange">
    Grapes: <input type=radio name="fruits" value="grapes">
</div>

This is how the above radio buttons group will look like in the browser:

Now, to loop through all these radio buttons, we will use the getElementsByName() method and pass the group name 'fruits' as a parameter to it. This will return us a node list array containing each radio button.

To get the value of the current radio button, we can use the element.value property. Similarly, to check if the radio button is selected or not, we can use the checked property.

If the radio button is selected, the checked property returns true, otherwise, it returns false.

Here is the full JS code:

// Get all radio buttons as a nodes array
let fruits = document.getElementsByName('fruits');

// Loop through the node list
for(let i = 0; i < fruits.length; i++){
    
    let value = fruits[i].value;  // Get radio button value
    let isSelected = fruits[i].checked;  // Check if radio button is selected
    
    console.log(value,' : ', isSelected);
}

After running the above code, you will get the following output:

apple  :  false
mango  :  true
orange  :  false
grapes  :  false

As you can see from the above output, the value of each radio button is printed along with its selected status. In our example, the second option was selected, therefore, its selected status is printed as true.

Method 2: Using the querySelectorAll() Method

A modern way to select all the radio buttons is by using the querySelectorAll() method. This method allows you to select elements based on their CSS selector and returns an array containing all the matching elements.

For example, if we want to select all the radio buttons with name="fruits", we can pass the string "input[name=fruits]" to the querySelectorAll() method as a parameter. This will return you a list of all the radio buttons that has the name 'fruits'.

Let’s take the same example that we discussed in the previous example and try to loop through all the radio buttons:

// Get all radio buttons as a nodes array
let fruits = document.querySelectorAll('input[name=fruits]');

// Loop through the node list
for(let i = 0; i < fruits.length; i++){

    let value = fruits[i].value;  // Get radio button value
    let isSelected = fruits[i].checked;  // Check if radio button is selected
    
    console.log(value,' : ', isSelected);
}

Below is the output of the above code:

apple  :  false
mango  :  true
orange  :  false
grapes  :  false

Conclusion

In this article, we learned how we can loop through a group of radio buttons using JavaScript.

To loop through all the radio buttons in a group, you can use the getElementsByName() method of the DOM and then run a for or foreach loop over the array returned by this method to check what all radio buttons are selected.

You can also use the querySelectorAll() method in place of the getElementsByName() method and still get the same result.

Thanks for reading.