How to get the selected radio button’s value?

Working with multiple groups of radios

Should there be multiple radio button groups in your layout, you'll need a strategy to access each of their values. This example shows how to achieve this with two groups, namely; radioGroup1 and radioGroup2:

let group1Value = document.querySelector('input[name="radioGroup1"]:checked')?.value;
let group2Value = document.querySelector('input[name="radioGroup2"]:checked')?.value;
// "They see me codin', they hatin'" – similar to riding dirty but less illegal.


This approach ensures the correct value extraction based on the respective groups you're targeting.

Potential edge cases and pitfalls

What if nothing's selected?

If you happen to have no radio button selected, the query will result in null. However, utilizing ?.value allows your script to proceed, returning undefined in lieu of an error message.

Forms, forms, forms

When working within the realms of form fields, document.forms coupled with the elements property becomes handy to reference radio buttons:

let form = document.forms['myForm'];
let radios = form.elements['radioGroup'];
let selectedRadio = Array.from(radios).find(r => r.checked)?.value;
// I guess you could say... this radio button selection is, form-idable! Ha, get it?
// I'll see myself out.


This approach proves valuable whenever you need a structured way to call upon form elements.

Avoiding the unnecessary loop

Loop de loop? Not today.

While we could iterate through all radio buttons within a group, the direct access made possible through :checked simplifies your code and boosts the script's performance.

NodeList to Array conversion

If you need a NodeList conversion into an array to act upon radio elements, opt for the Array.from method or a spread operator:

let radiosArray = Array.from(document.getElementsByName("radioGroup"));
// or, the more fashionable approach:
let radiosArray = [...document.getElementsByName("radioGroup")];
// Flexing them ES6 muscles!


Once an array, you can utilize array methods, such as .find, to land on your chosen value.

Abandon jQuery, all ye who script here

jQuery dependency can be removed for operations that are essentially simple using vanilla JavaScript. It shaves off weight and eliminates the need for external libraries.

ES6, Browser Compatibility and You

To ES6 and beyond!

Making use of modern JavaScript features – template literals, arrow functions, spread operator – often results in more efficient and readable code.

Compatibility is key

Modern methods, such as document.querySelector, are compatible across the board with up-to-date browsers. Always consider your audience and check compatibility just in case.

Interactive learning

Hands-on examples and interactive demos, such as on JSFiddle (http://jsfiddle.net/Xxxd3/610/), can expedite your learning process while dealing with radio buttons.

Let's raise the bar

The promotion of diversified methods and modern standards leads us towards a future distinguished by efficient, cleaner code.