How to Know Which Radio Button is Selected Via jQuery

Last updated on November 26th, 2024 at 07:14 am

Most websites and applications use HTML radio buttons to display choices for users to select. Often web developers need to determine which radio button is selected by users. This is required to find out and save user input. There are several ways to do this in jQuery library, which makes it very easy to work with HTML form elements. You can also do this using plain JavaScript, but it gets a little complicated. In this article, we will learn how to know which radio button is selected via jQuery. We will also learn how to do this using plain JavaScript.

How to Know Which Radio Button is Selected Via jQuery

We will look at how to determine which radio button is selected using jQuery. We will look at two use cases – where there is only one radio button group and where there are multiple radio button groups.

Single Radio Button Group

Let us say you have just one radio button group in an HTML form as shown below.

<form id='my_form'>
   <fieldset>
    <legend>Choose radio button</legend>
    <label><input id="option1" class="radio_button" type="radio" name="radio_name" value="1" /> 1</label> <br />
    <label><input id="option2" class="radio_button" type="radio" name="radio_name" value="2" /> 2</label> <br />
    <label><input id="option3" class="radio_button" type="radio" name="radio_name" value="3" /> 3</label> <br />
  </fieldset>
   
  </form>

There are several ways to determine which radio button is selected in jQuery. Let us look at some of the most common use cases.

1. Using :checked attribute & val() function

In jQuery, every radio button has an attribute checked that is set to true, if it is checked. Else it is set to false. jQuery also provides val() function for most HTML form elements, to directly return the selected value for inputs such as radio buttons and drop downs, and user input for textbox. We will use these checked attribute and val() function to get the checked value of radio button group. You can easily get the value of selected radio button using the following code.

$('input[name=radio_name]:checked', '#my_form').val()

In the above code, we select the form input with name=radio_name, where attribute checked is set. We retrieve the value of selected radio button with name=radio_name in form with id=my_form using val() function.

We call this code when the form changes, that is, when the change event is triggered for the form.

$('#my_form input').on('change', function() {
  alert($('input[name=radio_name]:checked', '#my_form').val());
});

2. Using name attribute

You can shorten the above code by simply calling val() function directly on the radio button that has checked attribute set. Here is an example to illustrate it.

$('input[name=radio_name]:checked').val()

3. Using type attribute

Alternatively, you can also use type attribute to pick the radio button that was selected. Here we are selecting the form input with type=radio, to select radio buttons. Among them, we filter that input where checked attribute is set.

$("#my_form input[type='radio']:checked").val();

If there are multiple radio button groups and you want to find the selected option for specific radio button group then you can use type and name attribute together to find the right radio button group.

4. Using class name

You can also select radio buttons using their class attribute. Here is an example to select all radio buttons with class=radio_button and then filter them further where checked attribute is set.

$("#my_form .radio_button:checked").val()

5. Determine if Any Radio Button is Checked

If you just want to determine if a specific radio button is selected or not, you can use is() function. It returns if a certain attribute is set for a given DOM element. In our case, we will check if the checked attribute is set or not. Here is the code to determine if radio button with id=option2 is selected or not.

$('#my_form input').on('change', function() {
  alert($("#option2").is(':checked'));
});

When user selects any of the radio buttons, the above function is called. It will check if radio button #2 is selected. It returns true if that is the case, else it returns false. This is a good way to check if a specific radio button is selected.

6. Using filter() function

jQuery provides filter() function that returns one or more elements that match certain selection criteria. Here is an example, where we first select all radio buttons with name=radio_button and then call filter() function with criteria ‘:checked’ to select the checked radio button.

$("input[name=radio_name]").filter(":checked").val()

7. Non jQuery Solution

If you do not use jQuery, you can also go for the following plain JavaScript code to determine the selected radio button.

for (let el of document.querySelectorAll('#my_form input'))
el.addEventListener('change', () =>
   alert(document.querySelector('input[name=radio_name]:checked', '#my_form').value) 
);

In the above code, we loop through all radio buttons in our HTML form. For each radio button, we add an event listener that is triggered on ‘change’ event. Whenever any of the radio button is checked, its event handler is called. This event handler will basically return the value attribute of selected radio button.

It is more complicated than plain jQuery code but useful if you are unable to use jQuery in your code.

Multiple Radio Button Groups

Sometimes, you may have multiple radio button groups on a single HTML form. Let us say you have the following HTML radio button groups.

<form id='my_form'>
   <fieldset>
    <legend>Choose radioName</legend>
    <label><input id="option1" class="radio_button" type="radio" name="radio_name" value="1" /> 1</label> <br />
    <label><input id="option2" class="radio_button" type="radio" name="radio_name" value="2" /> 2</label> <br />
    <label><input id="option3" class="radio_button" type="radio" name="radio_name" value="3" /> 3</label> <br />
  </fieldset>
  
  <fieldset>
    <legend>Choose radioName2</legend>
    <label><input id="option12" class="radio_button2" type="radio" name="radio_name2" value="a" /> a</label> <br />
    <label><input id="option22" class="radio_button2" type="radio" name="radio_name2" value="b" /> b</label> <br />
    <label><input id="option32" class="radio_button2" type="radio" name="radio_name2" value="c" /> c</label> <br />
  </fieldset>
   
  </form>

There are several ways to retrieve the values of each radio button group. In each case, you will need to get them separately. Here is an example to get the checked radio button values, using

var myRadio1 = $('input[name=radio_name]').filter(':checked').val();
var myRadio2 = $('input[name=radio_name2]').filter(':checked').val();
console.log(myRadio1, myRadio2);

You can also use class attributes to select the radio button groups, as long as they are different for each radio button group.

var myRadio1 = $('.radio_button').filter(':checked').val();
var myRadio2 = $('.radio_button2').filter(':checked').val();
console.log(myRadio1, myRadio2);

This is a more efficient solution that looping through all radio buttons, or radio button groups.

Please remember to include jQuery library for the above code to work. Here is a sample complete code for your reference.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form id='my_form'>
   <fieldset>
    <legend>Choose radioName</legend>
    <label><input id="option1" class="radio_button" type="radio" name="radio_name" value="1" /> 1</label> <br />
    <label><input id="option2" class="radio_button" type="radio" name="radio_name" value="2" /> 2</label> <br />
    <label><input id="option3" class="radio_button" type="radio" name="radio_name" value="3" /> 3</label> <br />
  </fieldset>
   
  </form>
<script type='text/javascript'>

$('#my_form fieldset label input').on('change', function() {
  alert($('input[name=radio_name]:checked').val());
});

</script>

Conclusion

In this article, we have learnt several different ways to determine which radio button is checked, using jQuery. The key is to pick radio buttons using any of its attributes such as type, id, class, name, etc. and filter them further using checked attribute. We have also learnt how to find checked radio button using plain JavaScript. We also saw how to determine checked radio button, in case there are multiple radio button groups. You can use any of these solutions according to your requirement.

FAQs

1. Do I need to always use jQuery to get selected radio button?

No. You can also determine the checked radio button using plain JavaScript or other third-party JS libraries. Using plain JavaScript is a little complicated, whereas jQuery provides many intuitive and easy to use functions for this purpose.

2. How to get selected radio button in case of multiple radio button groups?

You will need to separately select the checked radio button for each radio button group, using any of the above methods.

Also read:

How JavaScript Closures Work
How to Check Whether String Contains Substring in JavaScript
How to Remove Property from JavaScript Object