Javascript Icon Get 67% off the JavaScript Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs
Javascript

Getting the Value of Checked Radio Buttons

In this post you’ll learn a few ways to get the selected value of a radio input (<input type="radio">) and look at different ways of achieving the same result.

We’ll answer questions such as “How do I get the selected and checked value of a radio group?” and also “How do I get the selected and checked radio button Node?”. Let’s go!

☕ Once you’re finished, learn how to Check a Radio Button and set the Value!

Really, we would like to get the selected value from our radio buttons - so let’s create some markup to demonstrate:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

So now let’s get a reference to our form as well as the group of radio controls:

const form = document.forms.demo;
const radios = form.elements.characters;

Here we’re using the new HTMLFormElement.elements property which allows us to access the name="characters" attribute on the input.

Note: All radio buttons that you’d like in the same group need to have the same name="value" attribute for them to “link together”.

So, how do we get the value?

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

If we log out the resulting value of const radios we’ll see something interesting:

// ▶ RadioNodeList(3) [input, input, input, value: "mario"]
console.log(radios);

Well, that certainly looks interesting, a RadioNodeList? Nice!

The RadioNodeList interface represents a collection of radio elements in a <form> or a <fieldset> element.

You’ll also note that this is an Array-like object, which means we can iterate it as well as access the .value property - on the same object!

So, we could in fact go and Array.find our checked radio like so:

const radios = form.elements.characters;

// returns an HTMLInputElement
const checked = Array
                 .from(radios)
                 .find(radio => radio.checked);

From here, we could access the value property on that checked item if we needed to, we’d be dealing with the specific Element in this case:

const radios = form.elements.characters;

// returns a String value
const value = Array
               .from(radios)
               .find(radio => radio.checked).value;

BUT - we know that the RadioNodeList offers us a solution to keep things super minimal:

const radios = form.elements.characters;

// returns a String value
const value = radios.value;

Even though RadioNodeList is a Node collection, it still exposes the value property - which is really handy.

Try the live StackBlitz demo which demonstrates both approaches:

Using querySelector

You could also look at using querySelector for also solving this - as we have the ability to select elements that can be accessed via a :checked pseudo-selector.

The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.

Personally I prefer the “proper” forms API, but I totally agree that this is a great solution as well (hence the inclusion of it in this post!).

Let’s take a look, here’s what we’d need to do with querySelector:

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

This is a quick and easy pattern, but I personally feel interacting with the form APIs to be a clearer pattern to us, instead of relying on strings and potentially not understanding or seeing the :checked part of the above string.

Here’s an example that’ll live update based on what you select on StackBlitz:

😎 Next up learn how to check a Radio Button to complete your Input Radio knowledge!

Browser support

Check the browser support for:

tl:dr; the browser support in evergreen browsers is super.

The .elements has no Internet Explorer support but has Edge support.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

I hope you enjoyed the post, and if you’d love to learn more please check out my JavaScript courses, where you’ll learn everything you need to know to be extremely good and proficient. Enjoy and thanks for reading!

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.