How to Know which Radio Button is Selected using jQuery

This tutorial will show you how to find a selected radio button from a group of radio buttons with the help of <kbd class="highlighted">jQuery</kbd>.

For checking which radio button is selected, first, select the desired radio button group. Then you can use the <kbd class="highlighted">val()</kbd> method to get the value of the selected radio button.

This method returns the value attribute of the currently selected radio button:

javascript return the value of current radio button

$('input[name=radioName]:checked', '#my_Form').val()

This will get the value of the <kbd class="highlighted">input[name=radioName]:checked</kbd> element within the form with the id my_Form.

Here’s the full example:

How to Know which Radio Button is Selected using jQuery

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body style="text-align:center;">
    <form id="my_Form">
      <input type="radio" name="radioName" value="1" /> 1
      <br />
      <input type="radio" name="radioName" value="2" /> 2
      <br />
      <input type="radio" name="radioName" value="3" /> 3
      <br />
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <script type="text/javascript">
      $('#my_Form input').on('change', function() {
        console.log($(':checked').val());
      });
    </script>
  </body>
</html>

Try it Yourself »

Radio Buttons

The <input> element specifies fields for user input. The type of the field: text, radio button, checkbox, password field, etc. is determined by the value of the type attribute.

Radio buttons are presented in radio groups, which is a set of radio buttons that describe a collection of related options. One radio button can be selected at the same time in a group.

The buttons of the same group must share the same value of the name attribute. Selecting any radio button in the group will deselect any other buttons in the group.

The value of radio buttons is not shown to the user but is sent to the server-side to identify which radio button was selected.