Introduction

To find which radio button in a group is checked, you usually select the input with the shared name and the :checked pseudo-class. The important detail is that a radio group is defined by the name attribute, not by which inputs happen to sit next to each other in the HTML.

Core Sections

How radio groups are formed

Radio buttons belong to one group when they share the same name. Only one input in that group can be checked at a time.

1<form id="preferencesForm">
2  <label>
3    <input type="radio" name="theme" value="light" checked>
4    Light
5  </label>
6  <label>
7    <input type="radio" name="theme" value="dark">
8    Dark
9  </label>
10  <label>
11    <input type="radio" name="theme" value="system">
12    System
13  </label>
14</form>

In this example, theme is the group. That is what your JavaScript should query.

The simplest JavaScript solution

The most direct way is:

1const checked = document.querySelector('input[name="theme"]:checked');
2
3if (checked) {
4  console.log(checked.value);
5} else {
6  console.log('Nothing selected');
7}

querySelector returns the checked element itself, so you can read value, id, dataset, or any other property on that input. This is the cleanest answer for most plain HTML forms.

Read the selected radio when the user changes it

If you want to react as soon as the user switches options, use a change listener.

1const form = document.getElementById('preferencesForm');
2
3form.addEventListener('change', (event) => {
4  if (event.target.matches('input[name="theme"]')) {
5    console.log('Selected:', event.target.value);
6  }
7});

This pattern is often better than polling the DOM later because it keeps the UI state and the event that caused it close together.

Looping through the group manually

You do not have to use :checked. Another approach is to inspect each radio button in the group.

1const radios = document.querySelectorAll('input[name="theme"]');
2
3let selectedValue = null;
4for (const radio of radios) {
5  if (radio.checked) {
6    selectedValue = radio.value;
7    break;
8  }
9}
10
11console.log(selectedValue);

This is more verbose, but it is useful when you also need to inspect the full group or apply additional rules.

Handling the case where nothing is selected

Some forms intentionally start with no default selection. In that case, querySelector('...:checked') returns null, so your code must handle that safely.

1function getSelectedTheme() {
2  const checked = document.querySelector('input[name="theme"]:checked');
3  return checked ? checked.value : null;
4}
5
6console.log(getSelectedTheme());

That small null check prevents a very common Cannot read properties of null error.

jQuery version for older codebases

If you are maintaining older jQuery-based code, the equivalent is:

const selected = $('input[name="theme"]:checked').val();
console.log(selected);

The logic is the same. The syntax is just different because jQuery wraps the DOM query.

The same checked-state query also works well at submit time, which is often better than caching the selection in extra variables. Reading the current DOM state when the form is submitted avoids subtle bugs where the UI changed but your cached value did not.

Common Pitfalls

• Grouping radio buttons visually but forgetting that the real grouping key is the shared name attribute.
• Reading .value from the first radio in the group instead of the checked one.
• Assuming one radio is always selected and then failing when the query returns null.
• Adding separate listeners to every radio when one delegated change listener on the form would be simpler.
• Forgetting proper labels, which hurts accessibility even when the checked-state code works.

Summary

• Radio buttons are grouped by the shared name attribute.
• The usual solution is document.querySelector('input[name="group"]:checked').
• The returned element gives you the checked radio's value and other properties.
• Guard against null when the form may start with no default selection.
• Use a change listener when you want to react immediately to user selection changes.