How to Get Selected Radio Button Value Using jQuery

Last Updated on June 5, 2021 by Roshan Parihar

In this tutorial, learn how to get selected radio button value in jQuery. The short answer is: use jquery selectors :checked or $(this) to get the radio button checked or selected value.

Let’s find out with the useful examples given below.

Get Selected Radio Button Value Using jQuery $(this).val() Method

You have to first select the radio button using the $('input[type="radio"]') selector of jQuery. After that, to get the value of the currently selected radio button, you can use the $(this).val() method as given in the example below:

Output

Pass
Fail
Promoted

In the above example, there are three radio buttons that contain the result of the person. When you click a button, you will get the value of the currently clicked radio button.

Bonus: download a Free jQuery cheat sheet that will show you 20+ most important examples to learn in jQuery.

Find Checked Radio Option Using jQuery :checked Selector

In addition to the above method, you can also use :checked selector of jQuery to perform this task. Firstly, select the radio button using the jQuery $('input[type="radio"]') selector. After that, You can find the value of the selected radio button using the selector :checked with the function val() on click event as given below:

Output

Male
Female
Others

In the above example, select the gender of the person when you select the radio button option. You will get an alert that gives the required result.

DOWNLOAD Free jQuery CHEAT SHEET

You May Also Like to Read