How to Check if a Radio Button is Selected in JavaScript: An In-Depth Guide

Radio buttons are a ubiquitous UI element across the web, allowing users to easily select one option out of several choices. Being able to effectively handle radio input state is key for many web development scenarios.

As a full-stack developer working across the JavaScript ecosystem and specializing in accessible frontend code, I‘ve implemented radio button handling in countless interfaces. In this comprehensive guide, we‘ll take an in-depth look at the various techniques, best practices, and considerations when working with radio inputs in JavaScript applications.

Overview of Radio Buttons

Before we dive into the code, let‘s briefly recap how radio buttons work:

• Defined using an <input type="radio"> element
• Groups created by matching name attributes
• Only one radio can be checked at a time per group
• Provide an accessible way to select one choice out of several options

Here is some sample markup:

<form>
  <label>
    <input type="radio" name="size" value="small">
    Small
  </label>

  <label>
    <input type="radio" name="size" value="medium">
    Medium
  </label>

  <label>
    <input type="radio" name="size" value="large">
    Large
  </label>
</form>

This creates a size selection group where only one radio can be active.

Now let‘s look at the JavaScript techniques to work with these…

Detecting Checked State

The simplest way to check if a radio button is selected is by using document.querySelector():

// Get checked radio
var checked = document.querySelector(‘input[name="size"]:checked‘);

// Test if exists 
if (checked) {
  console.log(checked.value + ‘ is selected‘); 
}

The :checked pseudo-selector finds the checked input out of the name group. We can then access the value property of the input to determine which one was selected.

This provides a quick and terse way to handle a checked radio button.

However, the limitation is that .querySelector() only returns the first matching element. So if multiple radios were mistakenly checked, this would not catch that edge case properly.

Let‘s look at a more robust approach next…

Looping Through Radio Buttons

To reliably handle groups of radio buttons, we need to loop through all of them to test checked state:

// Get radio group  
var radios = document.getElementsByName(‘size‘);

// Loop through each radio 
for (var i = 0; i < radios.length; i++) {

  // Checked?
  if (radios[i].checked) {
    console.log(radios[i].value + ‘ is selected‘); 
  } 

}

Here we grab all the radios via document.getElementsByName() which returns a "live" NodeList that is updated dynamically. This allows us to reliably check the current state of the group on each iteration.

We loop through and check the .checked property to find the active selection. This properly handles multiple checked radios and ensures we catch all edge cases.

One downside is manually iterating through node lists can incur slight performance costs, so let‘s look at how we can optimize this next…

Using Array.prototype.find()

To optimize traversal of radio node lists, we can leverage the .find() array prototype method:

// Convert NodeList to Array
var radios = Array.from(document.getElementsByName(‘size‘));

// Find checked radio
var checked = radios.find(radio => radio.checked);

// Alert value
checked && alert(checked.value);

Here we first convert the NodeList into an Array using Array.from() to allow use of regular array methods.

We then use .find() to return the first checked radio button, no manual looping required. The arrow function syntax keeps things tidy.

This gives us optimized traversal and concise handling when dealing with radio groups.

One consideration is browser support – .find() has 92% global support, but support drops to 49% for Internet Explorer. So based on your browser requirements, polyfills may be needed.

Unchecking Other Radios

A common need is unchecking all other radios when one option is selected. This ensures only one radio stays active at a time, providing consistent behavior that users expect.

Here is one pattern to achieve this:

// Get all radios 
var radios = document.getElementsByName(‘size‘);

// Uncheck all
radios.forEach(radio => radio.checked = false);

// Check just this radio 
radios[2].checked = true;

First we get all the radios in that group. Then we loop through and unset every one. Finally we manually check the radio we want active.

This forces only one checked radio. We can also adapt this logic into a reusable function:

function checkRadio(name, value) {

  // Get groups radios
  var radios = document.getElementsByName(name);  

  // Uncheck all 
  radios.forEach(radio => radio.checked = false);

  // Find radio to check
  var target = radios.find(radio => radio.value == value);

  // Check it
  target.checked = true;

}

// Usage:
checkRadio(‘size‘, ‘medium‘);

Now we can reliably check any radio we want by name and value.

Handling radio groups is crucial for consistent and predictable interfaces.

Performance Comparison

Now that we‘ve covered several techniques, let‘s analyze the performance differences between them:

Method	Operations	Time Complexity
.querySelector()	Direct lookup	O(1)
Manual iteration	Loop over n	O(n)
.find()	Loop internally	O(n)

• .querySelector() is extremely fast since it directly finds element without traversal
• Manual iteration requires looping in our code so has slight overhead
• .find() still needs to iterate but handled internally, so performs well

So in summary:

• .querySelector() is fastest but lacks group handling
• .find() optimizes traversal with good group support
• Manual loops sufficient but slower, useful for complex logic

Based on this analysis, .find() provides the best performance versus functionality tradeoff.

However take browser support into consideration. .querySelector() is broadly supported and fastest for simple cases.

Common Use Cases

Now let‘s explore some practical examples applying these techniques:

Form Submission Handler

Submitting forms with radio inputs:

var form = document.getElementById(‘orderForm‘);

form.addEventListener(‘submit‘, function(e) {

  // Prevent submit
  e.preventDefault(); 

  // Get checked radio
  var size = document.querySelector(‘input[name="size"]:checked‘);

  // Validation
  if(!size) {
    alert(‘Please select a size!‘);
    return;
  }

  // Submit data...

});

Here we prevent the default submit, then check if a radio is selected. If not, we display a warning. Useful for form validation.

Survey Question Processing

Processing survey question responses with radio groups:

var responses = [];

function addResponse(question, value) {

  // Create response 
  var response = {
    question: question,
    value: value
  };

  // Add to array
  responses.push(response);

}

var form = document.getElementById(‘surveyForm‘);

form.addEventListener(‘change‘, e => {

  // Get checked radio 
  var checked = e.target.closest(‘input[type="radio"]:checked‘);

  // Add response  
  if(checked) {
    addResponse(checked.name, checked.value);
  }

});

Here we listen for change events from the radios, then extract the name and value to build the response data structure. Useful for survey analytics.

Conditional Form Sections

Showing / hiding form sections based on radio state:

var color = document.querySelector(‘input[name="color"]:checked‘).value; 

if(color === ‘red‘) {
  redSection.style.display = ‘block‘;
}

if(color === ‘blue‘) {
  blueSection.style.display = ‘block‘; 
} 

Getting the selected radio value lets us conditionally show / hide additional form fields and sections. Useful for multi-step flows.

These are just a few examples of applying radio detection – possibilities are endless!

Key Considerations

When implementing radio handling, there are several best practices and considerations around accessibility, semantics and progressive enhancement:

Ensure Keyboard Accessibility

Use appropriate role, tabindex and aria attributes to enable complete keyboard control for users requiring assistive devices.

Provide Multi-Option Selection

For mobile consideration, also allow touch / multi-select for improved usability.

Follow Semantic Structure

Use fieldsets/legends for radio groups, keep them close to their labels. Maintain logical form structure.

Graceful Degradation

Implement fallbacks so functionality degrades gracefully if JavaScript fails or is disabled.

Avoid Repetition

Abstract shared logic into reusable modules or components to keep code DRY.

Keeping these tips in mind will ensure your radio implementations remain accessible, semantic, resilient and scalable.

Conclusion

Handling radio buttons is a key aspect of effective web development. As we‘ve explored, there are several techniques to target checked radios:

• .querySelector() – Fast lookup of checked state
• Manual iteration – Robust handling of groups
• .find() – Optimization of traversal
• Unchecking others – Enforce single selection

The right approach depends on specific needs:

• Simple checks – .querySelector()
• Complex checks – manual iteration
• Performance – .find()

Additionally, considerations around accessibility, semantics and degradation should be kept in mind.

I hope this guide provides a comprehensive overview of working with radio buttons in JavaScript. Let me know if you have any other tips or tricks!