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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $('.resultscore input[type="radio"]').click(function(){ var demovalue = $(this).val(); alert("Your result is "+demovalue); }); }); </script> <div class="resultscore"> <input type="radio" name="test" value="Pass"/> Pass <input type="radio" name="test" value="Fail"/> Fail <input type="radio" name="test" value="Promoted"/> Promoted </div> |
Output
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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $('.gender input[type="radio"]').click(function(){ var selectedOption = $("input:radio[name=demo]:checked").val() alert("Your gender is "+selectedOption); }); }); </script> <div class="gender"> <input type="radio" name="demo" value="Male"/> Male <input type="radio" name="demo" value="Female"/> Female <input type="radio" name="demo" value="Others"/> Others </div> |
Output
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