How to Get Value of Selected Radio Button List Using jQuery

Hi friend How are you ,I hope you are doing good.Now I m discussing how to find a selected radio from a group of radio list with help of java script.This is very common problem in development of web application.
You can get value using JavaScript as well as jQuery plugin.I have taken example and demonstrate for both type option to get the value of selected radio button list.

Checkout other tutorial of jQuery,

get-radio-value-using-jquery

Simple Example to Get Value of Selected Radio Button List

Step 1: We will define radio group list using HTML radio element.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
<h1> Simple Example to Get Value Of Radio Selection List</h1>
<div class="alert alert-success" id="message" style="display:none"></div>
<div class="row well">
<input type="radio" name="radioGrp" value="Milk"> Milk<br>
<input type="radio" name="radioGrp" value="Butter" checked> Butter<br>
<input type="radio" name="radioGrp" value="Cheese"> Cheese<br>
<input type="radio" name="radioGrp" value="Water"> Water<br>
<input type="radio" name="radioGrp" value="Beer"> Beer<br>
<input type="radio" name="radioGrp" value="Wine" checked> Wine<br>

<a type="button" class="btn btn-primary pull-right getvalue">Get Value</a>
</div>

Option 1: Function to get Value Radio Button Using JavaScript

Select Code
1
2
3
4
jQuery('.getvalue').on('click', function(e) {  
    var selValue = document.querySelector('input[name = "radioGrp"]:checked').value;
    alert(selValue);
});

Option 2: Function to get Value Radio Button Using jQuery

Select Code
1
2
3
4
5
$(document).ready(function(){
  jQuery('.getvalue').on('click', function(e) {
    $('#message').show().text($("input:radio[name=radioGrp]:checked").val());
  });
});

Demo and Download source code

I hope it will help you.