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:

red

Example with a button click

<button id="showValue">Show selected value</button>

$('#showValue').on('click', function () {
  var selectedValue = $('input[name="color"]:checked').val();
  console.log(selectedValue);
});

Limit the search to a specific form

This is helpful when a page has multiple forms.

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

If nothing is selected

If no radio button is checked, .val() will return undefined.

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

if (selectedValue === undefined) {
  console.log('No option selected');
}

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

2. var selected = ...

   • The selected radio button is stored as a jQuery object

3. selected.val()

   • jQuery reads the value attribute of that radio button

4. console.log(value)

   • Prints the selected value

Result

Because the dark radio button is checked, the output is:

dark

Another example with no selection

<input type="radio" name="size" value="small">
<input type="radio" name="size" value="large">

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

Since none are checked, the result is:

undefined

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();

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

  if (!method) {
    alert('Select a payment method first.');
    return;
  }

  console.log('Submitting payment method:', method);
});

Keep selectors specific

Instead of:

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

prefer:

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

This is safer when the page has multiple radio groups.

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" value="blue">

Why it is a problem:

• These are not one group
• The browser treats them as separate radio buttons

Correct HTML:

<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">

3. Not handling the case where nothing is selected

Broken example:

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

Why it is a problem:

• If nothing is selected, value is undefined
• Calling a method on undefined causes an error

Safer version:

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

if (value) {
  alert(value.toUpperCase());
} else {
  alert('Please select an option');
}

4. Using a selector that is too broad

Broken example:

$(':checked').val();

Why it is a problem:

• This may match checkboxes, radio buttons, or other checked inputs
• On a larger page, it can return the wrong value

Better:

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

5. Confusing checked attribute with current state

When reading the current selected radio in jQuery, use :checked rather than relying on the original HTML attribute alone.

Related selector choices

Radio buttons vs checkboxes

Even though both use :checked, radio buttons are designed for single choice, while checkboxes allow multiple 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

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

if (!value) {
  console.log('No selection');
}

HTML example

<input type="radio" name="choice" value="yes">
<input type="radio" name="choice" value="no">

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 :checked for checkboxes too?

Yes. :checked works for both radio buttons and checkboxes, but checkboxes may return multiple matches.

Should I select by name or by type="radio"?

Selecting by name is usually better because it targets one specific radio group.

• 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.