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

For checking which radio button is selected, firstly, get the desired input group with the type of input as an option. Then you can use the val() method to get the value of the selected radio button.

This method returns the name of the currently selected option:

Watch a course JavaScript -The Complete Guide (Beginner + Advanced) 

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

This will get the value of input[name=radioName]:checked item with the id my_Form.

Here’s the full example:

<!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($('input[name=radioName]:checked', '#my_Form').val());
      });
    </script>
  </body>
</html>

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.