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!
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
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?
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;
RadioNodeList is a Node collection, it still exposes the
value property - which is really handy.
Try the live StackBlitz demo which demonstrates both approaches:
The :checked CSS pseudo-class selector represents any radio (
<input type="radio">), checkbox (
<input type="checkbox">), or option (
<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
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:
Check the browser support for:
tl:dr; the browser support in evergreen browsers is super.
.elements has no Internet Explorer support but has Edge support.