How to find out which radio button is selected via jQuery: a complete guide

Why it's important and how not to get confused with radio buttons

Imagine: you are creating a feedback form, a survey, or profile settings. Everywhere the user needs to choose one option from several, radio buttons come to the rescue. But when it comes to handling the selection on the client side, many beginners (and even experienced developers) stumble. The question "How can I know which radio button is selected via jQuery?" is one of the most popular on Stack Overflow, and for good reason: it seems simple, but there are plenty of nuances.

In this guide, we will cover several ways to get the value of a selected radio button using jQuery. You will learn how to avoid common mistakes, how to write clean code, and how to adapt solutions for different scenarios. Let's go!

Basic HTML structure for radio buttons

Before writing jQuery, let's create a simple form with radio buttons. Let's say we are asking the user about their favorite programming language:

<form id="surveyForm">\n  <p>Your favorite programming language:</p>\n  <label>\n    <input type="radio" name="language" value="python"> Python\n  </label>\n  <label>\n    <input type="radio" name="language" value="javascript"> JavaScript\n  </label>\n  <label>\n    <input type="radio" name="language" value="java"> Java\n  </label>\n  <br><br>\n  <button type="button" id="getResult">Find out selection</button>\n</form>

Note: all radio buttons have the same attribute name="language". This is what groups them together — you can only select one option. If they had different names, they would be independent groups.

Method #1: jQuery :checked selector — the classic approach

The most direct and commonly used method is to apply the :checked selector. It finds all checked (selected) form elements. Combined with .val(), we instantly get the value:

$('#getResult').on('click', function() {\n  var selectedValue = $('input[name="language"]:checked').val();\n  if (selectedValue) {\n    alert('You selected: ' + selectedValue);\n  } else {\n    alert('Nothing selected!');\n  }\n});

What's happening here?

\n
• $('input[name="language"]:checked') — searches among all inputs with the name "language" for only those that are checked.
\n
• .val() — gets the value attribute of the found element.
\n
• The check if (selectedValue) — if nothing is selected, .val() will return undefined, and we show a warning.
\n

This method is ideal when you have one group of radio buttons and need to get the value of one of them.

Method #2: Using .filter() and .is() for flexibility

Sometimes you don't want to rely solely on :checked, or you need to perform additional actions with the selected element. This is where the .filter() and .is() methods come in handy:

$('#getResult').on('click', function() {\n  var selected = $('input[name="language"]').filter(':checked');\n  if (selected.length > 0) {\n    console.log('Selected element:', selected);\n    var value = selected.val();\n    var id = selected.attr('id');\n    alert('Value: ' + value + ', ID: ' + (id || 'none'));\n  } else {\n    alert('Please select a language.');\n  }\n});

The .filter(':checked') method filters only the checked elements from the collection. And .is(':checked') can be used to check a specific element:

// Check if Python is selected\nif ($('input[value="python"]').is(':checked')) {\n  console.log('Python — an excellent choice!');\n}

This approach is convenient when you need not just to get the value but also to manipula