How to Get the Value of Selected Radio Button in JQuery


You have a series of radio buttons and you want to get the value of selected radio button in JQuery. You can use following technique.

Following is the HTML code for radio buttons. Note how I wrap the radio buttons inside a div to easily access the selected radio button in JQuery.

<div id="divColor"> 

   <input id="Color1" type="radio" name="Color" value="Red" checked="checked" /> Red 
   <input id="Color2" type="radio" name="Color" value="Green" /> Green 
   <input id="Color3" type="radio" name="Color" value="Blue" /> Blue 

</div> 

<input type="button" id="btnSubmit" value="Submit" />

Following the JQuery code to get the selected radio button value on submit button click.

$("#btnSubmit").click(function() { 

   var color = $("#divColor input:radio:checked").val(); 
   alert(color); 

});

 

 

About author


User avatar

Waqas Anwar

Founder of EzzyLearning.com, Senior Consultant, Microsoft .NET and Web Technologies

Comments 3

user
manish
  • 19 October 2012

how to get the values of radio button which are in dynamiv divs....by div id???
my div id is $x which increses every time by x++;


i am trying this code:
here q is dynamiv div id ($x) ...which is passed to jquery and stored in q


var color = $(""#"+q input:radio:checked").val();
alert(color);


but it is not working...please help

user
Waqas Anwar
  • 19 October 2012

Manish, Try this

var color = $("#"+ q).find("input:radio:checked").val();

user
ranadheer
  • 06 November 2013

hi. nice post. thanks. To get the selected radio button value, look at this post also: http://coding-issues.blogspot.in/2013/11/get-selected-radio-button-value-jquery.html

Add Comment