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