How to Know which Radio Button is Selected using jQuery

Radio buttons are commonly used in web development to allow users to choose a single option from a set of options.

Knowing which radio button is selected is crucial for processing the user’s selection.

In this tutorial, we will explore how to know which radio button is selected using jQuery, a popular JavaScript library.

Radio Buttons

Radio buttons are used to create a set of options where the user can only select one option.

The radio buttons are usually grouped together and labeled with the same name, making it possible to select only one button from the group.

The selected button is marked with a dot and remains selected until another button from the same group is selected.

Understanding jQuery

jQuery is a fast, small, and feature-rich JavaScript library.

It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers.

Using jQuery to Determine the Selected Radio Button

In order to determine which radio button is selected using jQuery, you need to first understand how to select the radio buttons using jQuery.

You can select the radio buttons using their name attribute.

For example, if you have a group of radio buttons with the name “gender”, you can select all the radio buttons in the group like this:

$("input[name='gender']")

To determine which radio button is selected, you can use the :checked selector.

The :checked selector selects elements that are checked or selected.

So, to select the selected radio button, you can use the following code:

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

Once you have selected the selected radio button, you can get its value using the val() method.

For example:

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

Putting it All Together

Here is a complete example that demonstrates how to determine which radio button is selected using jQuery:

<form>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other<br>
</form> 

<script>
  $(document).ready(function() {
    $("form input[type='radio']").change(function() {
      var selectedRadio = $("input[name='gender']:checked").val();
      alert("Selected Radio: " + selectedRadio);
    });
  });
</script>

In this example, we first selected all the radio buttons in the form using $("form input[type='radio']").

Then, we attached a change event to the radio buttons using the change() method.

Whenever the user selects a radio button, the change event is triggered, and the selected radio button’s value is determined using the code we discussed earlier.

Finally, we use the alert() method to display the selected radio button’s value.