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 


<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(); 




About author

User avatar

Waqas Anwar

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

Comments 3

  • 19 October 2012

how to get the values of radio button which are in dynamiv 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();

but it is not working...please help

Waqas Anwar
  • 19 October 2012

Manish, Try this

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

  • 06 November 2013

hi. nice post. thanks. To get the selected radio button value, look at this post also:

Add Comment