Get the Selected Radio Button Value with jQuery

By the end of this page, you will understand how radio buttons work in HTML forms, how jQuery can find the checked radio button, and how to safely read its value before sending it in a form submission or AJAX request.

Radio buttons are used when a user must choose one option from a group. In HTML, radio buttons belong to the same group when they share the same name attribute.

Only one radio button in a group can be selected at a time. The selected radio button is the one with the checked state.

In jQuery, the most common way to find the selected radio button is to use the :checked selector.

For example:

$('input[name="choice"]:checked').val()

This works because:

• input[name="choice"] finds all radio buttons in the group
• :checked narrows that set down to the currently selected one
• .val() reads its value

This matters in real programming because radio buttons are often used for:

• payment method selection
• shipping options
• user preferences
• filters in search forms
• survey answers

If you do not target the checked radio button, you may read the wrong value or accidentally work with all radio buttons instead of the selected one.

Think of a radio button group like a set of labeled switches where only one switch can stay on.

• The name attribute defines the group
• Each radio button has a value
• :checked asks: which switch is currently on?

So instead of asking for all switches, you ask for the switch that is on right now.

Basic syntax

$('input[name="myRadioGroup"]:checked').val()

Example HTML

<form id="myForm">
  <label>
    <input type="radio" name="color" value="red"> Red
  </label>
  <label>
    <input type="radio" name="color" value="blue"> Blue
  </label>
</form>

Get the selected value

var selectedValue = $('input[name="color"]:checked').val();
console.log(selectedValue);

If Red is selected, this prints:

Traceable example

<form id="settingsForm">
  <input type="radio" name="theme" value="light">
  <input type="radio" name="theme" value="dark" checked>
</form>

var selected = $('#settingsForm input[name="theme"]:checked');
var value = selected.val();
console.log(value);

What happens step by step

1. $('#settingsForm input[name="theme"]:checked')

   • jQuery looks inside the form with id settingsForm
   • It finds radio inputs with name="theme"
   • It filters them to only the one that is :checked

Radio button selection appears in many common features:

• Checkout forms: choose standard or express shipping
• Payment selection: choose card, PayPal, or bank transfer
• User settings: pick light or dark theme
• Polls and surveys: select one answer from several choices
• Search filters: choose sort order such as newest or cheapest
• Admin panels: choose status like active or inactive

Example: sending the selected shipping option in an AJAX request:

var shipping = $('input[name="shipping"]:checked').val();

$.post('/checkout', {
  shippingMethod: shipping
});

This makes sure only the user's actual choice is submitted.

In real projects, developers usually combine selected radio values with validation and event handling.

Common patterns

Guard clause before using the value

var paymentMethod = $('input[name="payment"]:checked').val();

if (!paymentMethod) {
  alert('Please select a payment method.');
  return;
}

This avoids sending empty or invalid form data.

Read the value when the user changes selection

$('input[name="payment"]').on('change', function () {
  console.log('Selected:', $(this).val());
});

Here, $(this) refers to the radio button the user just selected.

Use the value during form submission

$('#checkoutForm').on('submit', function (e) {
  e.preventDefault();

   method = $().();

   (!method) {
    ();
    ;
  }

  .(, method);
});

1. Selecting all radio buttons instead of the checked one

Broken example:

$('form :radio').val();

Why it is a problem:

• This selects all radio buttons in the form
• .val() may return only the first matched element's value, not the selected one

Correct version:

$('form input[type="radio"]:checked').val();

Or better, target the group by name:

$('input[name="color"]:checked').val();

2. Forgetting that radio buttons must share the same name

Broken HTML:

<input type="radio" name="color1" value="red">
<input type="radio" name="color2" =>

Related selector choices

// Get selected radio value by group name
$('input[name="groupName"]:checked').val();

// Example
$('input[name="color"]:checked').val();

// Inside a specific form
$('#myForm input[name="color"]:checked').val();

// In a change event
$('input[name="color"]').on('change', function () {
  console.log($(this).val());
});

Rules to remember

• Radio buttons in the same group must share the same name
• Use :checked to find the selected one
• Use .val() to get its value
• If none is selected, .val() returns undefined
• Prefer specific selectors like input[name="..."] over broad ones like :radio

Common pattern

How do I get the selected radio button value in jQuery?

Use:

$('input[name="yourGroupName"]:checked').val();

Why does $('form :radio').val() not give the selected value?

Because it selects all radio buttons, not just the checked one. Add :checked to target the selected radio button.

What happens if no radio button is selected?

.val() returns undefined, so you should check for that before using the result.

Can I get the selected radio button when the user clicks it?

Yes. Use a change event:

$('input[name="color"]').on('change', function () {
  console.log($(this).val());
});

Do radio buttons need the same name?

Yes. Radio buttons only behave as one group if they share the same name attribute.

Can I use for checkboxes too?

• HTML forms — Radio buttons are part of form input handling.
• jQuery selectors — Finding the right element depends on selector syntax.
• :checked selector — This is the key pseudo-selector for selected inputs.
• .val() in jQuery — Used to read or set form control values.
• Form validation — Often used to ensure a radio option was selected before submission.
• jQuery event handling — Useful for reacting when the selected radio button changes.
• Checkboxes vs radio buttons — Helps clarify when single-choice or multiple-choice inputs should be used.