Get the Selected Radio Button Value with jQuery

You will learn how radio button groups work in HTML and how to use jQuery's :checked selector to find the selected option. You will also learn how to read its value safely, respond to selection changes, and avoid common selector mistakes.

Radio buttons represent a choice where the user may select one option from a group. HTML groups radio buttons by giving them the same name attribute.

<input type="radio" name="delivery" value="standard">
<input type="radio" name="delivery" value="express">

Because both inputs have name="delivery", selecting express automatically deselects standard.

In jQuery, :radio selects radio inputs, while :checked selects inputs that are currently checked. Combine them to find the selected radio button:

$('input[name="delivery"]:checked')

Call .val() on that jQuery selection to read the selected input's value attribute. This matters whenever a form needs to collect one user decision, such as a shipping method, payment type, account role, or survey answer.

Think of a radio group as a row of labeled switches connected by one wire. The shared name is the wire: only one switch on that wire can be on at a time.

• :radio means “show me every switch of this type.”
• :checked means “show me the switch that is currently on.”
• .val() means “read the label/value stored on that switch.”

The selector input[name="delivery"]:checked is like asking: “Among the delivery switches, which one is on right now?”

Use :checked after a radio selector or after a specific name selector.

// All checked radio buttons on the page
$(':radio:checked')

// The checked radio button in one named group
$('input[name="delivery"]:checked')

// Its value
const deliveryMethod = $('input[name="delivery"]:checked').val();

Example:

<form id="order-form">
  <label>
    <input type="radio" name="delivery" value="standard" checked>
    Standard delivery
  </label>

  <label>
    <input type="radio" name="delivery" value="express">
    Express delivery
  </label>

  <button type="button" id="show-choice">Show choice</button>
</form>

<script>
  $('#show-choice').on('click', function () {
    const selectedValue = $('input[name="delivery"]:checked').val();
    console.log(selectedValue);
  });
</script>

Initially, the console prints standard. If the user selects Express before clicking the button, it prints express.

If no radio button might be selected, check the selection length before using its value:

const $selected = $('input[name="delivery"]:checked');

if ($selected.length === 0) {
  console.log('Please choose a delivery method.');
} else {
  console.log($selected.val());
}

Consider this HTML:

<input type="radio" name="plan" value="basic">
<input type="radio" name="plan" value="pro" checked>

And this jQuery code:

const $selectedPlan = $('input[name="plan"]:checked');
const planValue = $selectedPlan.val();
console.log(planValue);

Step by step:

1. input[name="plan"] finds both radio inputs because both belong to the plan group.
2. :checked filters that result to only checked inputs.
3. The pro radio button has the checked attribute initially, so $selectedPlan contains that one element.
4. .val() reads its value="pro" attribute.
5. console.log(planValue) prints pro.

After the user chooses Basic, running the same selector finds the Basic input instead, and .val() returns basic.

Radio button selection is useful when an app needs exactly one choice from a known set:

• Checkout forms: select standard, express, or pickup delivery.
• Payment pages: choose card, bank_transfer, or wallet.
• User settings: choose a theme such as light, dark, or system.
• Survey forms: record one answer to a multiple-choice question.
• Admin dashboards: select one status or permission level.

For a normal HTML form submission, the browser already sends the selected radio button's name and value. jQuery is useful when you need the value immediately for validation, updating the page, or sending an AJAX request.

In real projects, make selectors specific to the form or component so unrelated radio groups cannot affect the result.

const $form = $('#checkout-form');
const delivery = $form.find('input[name="delivery"]:checked').val();

A common pattern is to update the interface when the user changes the selection:

$('input[name="delivery"]').on('change', function () {
  const delivery = $('input[name="delivery"]:checked').val();
  const message = delivery === 'express'
    ? 'Express delivery costs extra.'
    : 'Standard delivery selected.';

  $('#delivery-message').text(message);
});

Use validation before an AJAX request when a selection is optional in the HTML or created dynamically:

$('#checkout-form').on('submit', function (event) {
  const $selected = $(this).find('input[name="delivery"]:checked');

  if ($selected.length === 0) {
    event.preventDefault();
    $('#delivery-error').text('Choose a delivery method.');
    return;
  }

  $('#delivery-error').text('');
});

For standard form posts, give every radio group a meaningful name. The selected input will be included in submitted form data automatically.

Using :radio without :checked

This selects every radio button, not the chosen one:

const value = $('form :radio').val();

.val() on several matched elements returns the value of the first matched element, which may not be selected.

Use:

const value = $('form :radio:checked').val();

Giving each radio button a different name

This allows multiple buttons to be selected because they are separate groups:

<!-- Incorrect for one choice -->
<input type="radio" name="standard" value="standard">
<input type="radio" name="express" value="express">

Use one shared name:

<input type="radio" name="delivery" value="standard">
<input type="radio" name="delivery" value="express">

Reading a value before the user makes a choice

If no input is checked, .val() returns undefined.

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

Prevent this by adding checked to a default option, adding required, or checking .length before using the value.

Confusing checked with selected

• Use checked for radio buttons and checkboxes.
• Use selected for <option> elements inside a <select>.

Using .attr('checked') to determine the current choice

attr('checked') can reflect the original HTML attribute rather than the user's current interaction. Use :checked or .prop('checked') for current state.

const isChecked = $('input[name="delivery"]').first().prop('checked');

Radio buttons and checkboxes can both be matched with :checked, but their behavior differs:

// Selected radio value in a named group
const value = $('input[name="groupName"]:checked').val();

// Selected radio element
const $selected = $('input[name="groupName"]:checked');

// Check whether the group has a selected input
const hasSelection = $('input[name="groupName"]:checked').length > 0;

// Listen for a changed choice
$('input[name="groupName"]').on('change', function () {
  console.log($(this).val());
});

// Limit a search to one form
const valueInForm = $('#my-form')
  .find('input[name="groupName"]:checked')
  .val();

Rules:

• Radio buttons belong to the same group only when they share a name.
• Use :checked for the current checked state.
• Use .val() to read the value attribute.
• .val() returns undefined if the selector matches no element.
• Use required on a radio input when the user must select an option.

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

Use a selector with :checked and call .val():

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

Why does $('form :radio').val() return the wrong value?

That selector matches all radio buttons. Calling .val() on multiple elements reads the first matched element's value, not necessarily the checked one. Add :checked.

Can I use $('input:radio:checked')?

Yes. It works, although $('input[type="radio"]:checked') or $('input[name="delivery"]:checked') is often clearer and more specific.

What happens if no radio button is selected?

The selector matches nothing, so .val() returns undefined. Check .length or make a choice required.

Do radio buttons need the same name?

Yes, if they represent one choice. A shared name makes them a group and ensures only one can be selected.

Does a normal form submit the selected radio value automatically?

Yes. The browser submits the selected input's name=value pair. For example, name="delivery" value="express" becomes delivery=express.

How do I run code when the radio choice changes?

Attach a change handler:

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

• HTML form controls — Radio buttons are one type of form input.
• CSS and jQuery selectors — :checked, attribute selectors, and descendant selectors find the right elements.
• Checkboxes — They also use :checked, but support multiple selections.
• jQuery event handling — The change event reacts when a user chooses another option.
• Form validation — Check that required choices are present before processing data.
• Form submission and serialization — Selected controls become name=value request data.
• DOM properties and attributes — .prop('checked') reads current state, while attributes describe markup defaults.