803

The problem statement is simple. I need to see if user has selected a radio button from a radio group. Every radio button in the group share same id.

The problem is that I don't have control on how the form is generated. Here is the sample code of how a radio button control code looks like:

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

In addition to this when a radio button is selected it doesn't add a "checked" attribute to the control just text checked (I guess just the property checked without a value). Below is how a selected radio control looks like

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

Can anybody help me with jQuery code that can help me to get the value of checked radio button?

5
  • 95
    You've got multiple elements with the same ID? That's... terrible.
    – Matt Ball
    Commented Dec 24, 2011 at 2:46
  • 2
    possible duplicate of How can I get which radio is selected via jQuery?
    – Alex Angas
    Commented Feb 9, 2015 at 11:49
  • How does that work with them all having the same ID? When evaluating by ID doesn't the evaluation stop at the first matched element? What's the purpose here are they dynamic elements shown at different times? Commented Oct 9, 2017 at 14:03
  • 3
    FYI, ASP.NET MVC's @Html.RadioButtonFor helper will generate all radio buttons with the same id. oops.
    – Triynko
    Commented Mar 16, 2018 at 21:23
  • try my solution that is best in all solutions. :: stackoverflow.com/questions/8622336/…
    – pankaj
    Commented Jan 21, 2022 at 8:38

33 Answers 33

1682

Just use.

$('input[name="name_of_your_radiobutton"]:checked').val();

It is that easy.

8
  • 35
    Do not forget the quote signs: $("input[name='" + fieldName + "']:checked").val();
    – Atara
    Commented Mar 10, 2015 at 9:33
  • 7
    Why does this return "on" rather than the value I've specified in the HTML? EDIT: Because I didn't have quotes around my values.
    – Vincent
    Commented Jun 2, 2016 at 17:30
  • 4
    $('input[name="name_of_your_radiobutton"]:checked').val(); Commented Jun 20, 2017 at 4:07
  • 1
    Note that if no button is selected this will just return null, which is logical but sometimes can confuse you when you're used to seeing "" as the default value via the .val() call.
    – xji
    Commented Jan 8, 2018 at 22:30
  • 2
    This is correct but, for those who want to get the script size as small as possible then you can use a class on each of your radio buttons (example class="mo") and then use $(".mo:checked").val(); It depends of course on how many radio buttons you have. If, like me, you watch every byte of data you throw at a user then its useful to know both approaches. Commented Dec 11, 2020 at 11:56
355

First, you cannot have multiple elements with the same id. I know you said you can't control how the form is created, but...try to somehow remove all the ids from the radios, or make them unique.

To get the value of the selected radio button, select it by name with the :checked filter.

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

EDIT

So you have no control over the names. In that case I'd say put these radio buttons all inside a div, named, say, radioDiv, then slightly modify your selector:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}
2
  • Sure you can have multiple elements with the same ID. It's forbidden, and you can't use those IDs, but it's totally possible and you can still use the elements and address them by other means, like you showed.
    – ygoe
    Commented Oct 16, 2020 at 21:10
  • how do you do this by class name? is that possible?
    – djack109
    Commented Jan 31 at 20:56
93

Simplest way to get the selected radio button's value is as follows:

$("input[name='optradio']:checked").val();

No space should be used in between selector.

1
  • The most straightforward option, this is.
    – andreszs
    Commented Aug 10, 2019 at 23:30
52
$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

Make sure to wrap this in the DOM ready function ($(function(){...}); or $(document).ready(function(){...});).

2
  • I am always getting a blank value with this code.. I guess this is due to the fact that I don't have property with value checked just a text checked (I am not sure if we can consider it a property) Commented Dec 24, 2011 at 3:02
  • Are you selecting the radio button by its ID? Did you change radioID to its ID?
    – Purag
    Commented Dec 24, 2011 at 3:54
43
<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

This will return, checked radio button value.

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}

More details in my blog: https://webexplorar.com/jquery-get-selected-radio-button-value/

1
  • 1
    For who couldn't get the input's value; need to set the same names on them and then set the values as 1,2,3.. If you dont set the value, you get "on" as default value. This answer helped me.
    – Codecopath
    Commented Jul 15, 2022 at 7:20
37
  1. In your code, jQuery just looks for the first instance of an input with name q12_3, which in this case has a value of 1. You want an input with name q12_3 that is :checked.
$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
  1. Note that the above code is not the same as using .is(":checked"). jQuery's is() function returns a boolean (true or false) and not an element.
26

This code works.

var radioValue = $("input[name='gender']:checked").val();
1
  • This is the same solution as in this highly upvoted answer from 2014, with just a different button name. Several other answers also mention this. When answering older questions that already have answers, please make sure you provide either a novel solution or a significantly better explanation than existing answers.
    – Eric Aya
    Commented Sep 2, 2021 at 10:45
24

Get all radios:

var radios = $("input[type='radio']");

Filter to get the one that's checked

radios.filter(":checked");

OR

Another way you can find radio button value

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();
4
  • 3
    I use $('[name=your_inputs_names]:checked').val() cause they always have same unique name
    – vladkras
    Commented Jan 27, 2017 at 8:35
  • 4
    Good use of .filter() Commented Oct 9, 2017 at 13:58
  • 2
    That .filter(). I wish this answer can be at the top. Commented Apr 4, 2019 at 8:28
  • This is by far the best answer on this entire page. OP asks how to get one radio out of a group of radios. None of the answers above work when your radio buttons have unique ID's (which is how it goes unless you have only 1 ?)
    – devon t
    Commented Feb 26, 2022 at 2:44
24
 $("input[name='gender']:checked").val()

for nested attributes

$("input[name='lead[gender]']:checked").val()

Don't forget single braces for name

18

To get the value of the selected Radio Button, Use RadioButtonName and the Form Id containing the RadioButton.

$('input[name=radioName]:checked', '#myForm').val()

OR by only

$('form input[type=radio]:checked').val();
13

Check the example it works fine

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();

12

Use Below Code

$('input[name=your_radio_button_name]:checked').val();

Please note, value attribute should be defined so could get "Male" or "Female" in your result.

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>
11

See below for working example with a collection of radio groups each associated with different sections. Your naming scheme is important, but ideally you should try and use a consistent naming scheme for inputs anyway (especially when they're in sections like here).

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}
* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>

11

You can use the parent form to find the radio input value. You don't know how the form is generating but you can give class to the form.

$('.form_class input[type=radio]:checked').val();
9
if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something
3
  • 1
    Why bother doing the string comparison to undefined when you know for certain the value must be checked? There's no need in jQuery. Commented Dec 24, 2011 at 6:07
  • In the question I don't see any info suggesting that one radio button will be checked from the start. I mean it's like that in most cases with radio buttons. So in the case when we'd have to check that and none were selected, attr("checked") would return a null object. Commented Dec 25, 2011 at 14:53
  • Right, but I just meant returning null wouldn't cause an error so the comparison to "undefined" is unnecessary. Commented Dec 25, 2011 at 22:49
8

Here is a shorter version of getting value of selected radio button

var value = $(":radio:checked").val()
6

Try this with example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>
6

By Name only

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});
6

You can get the value of selected radio button by Id using this in javascript/jQuery.

$("#InvCopyRadio:checked").val();

I hope this will help.

4
  • very efficient !!
    – John
    Commented Jan 2, 2020 at 11:57
  • 3
    This assumes having at least 2 elements with same ID - which is not correct and some browsers will report warrning into console. You need to assign unique ID to each radio button and traverse through them by calling each ID.
    – lubosdz
    Commented Nov 26, 2020 at 10:10
  • 1
    @lubosdz Yes, we should not have 2 elements with the same ID. But, as you check the question. The user has selected a radio button from a radio group. Every radio button in the group shares the same id. So in that case this works fine. Commented Nov 27, 2020 at 4:03
  • To elaborate,Radio button concept fails as radio buttons are provided as multiple options, only one to select... Set of Radio buttons or checkboxes must not have same Id. A single web page can have only one unique ID through out the page.
    – MSQ
    Commented Feb 24, 2021 at 6:43
6

I know that I am joining this late. But it is worth mentioning that it takes

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

And then I checked this in my js. It could be like

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

`

4

The best way to explain this simple topic is by giving simple example and reference link:-

In the following example we have two radio buttons. If the user selects any radio button, we will display the selected radio button value in a alert box.

Html:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jquery:-

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });
3
<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

and handle jquery for alert as for th e value set / Changed through div id:

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

it is so easy....:-}

1
  • A simpler way to do this using the parent id would be.... $("#subscriptions").on( "change", function() { var selection = $(this).find("input:checked").val(); alert( selection ); });
    – MistyDawn
    Commented Apr 13, 2018 at 23:00
2

I am not a javascript person, but I found here for searching this problem. For who google it and find here, I am hoping that this helps some. So, as in question if we have a list of radio buttons:

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

I can find which one selected with this selector:

$('.list input[type="radio"]:checked:first').val();

Even if there is no element selected, I still don't get undefined error. So, you don't have to write extra if statement before taking element's value.

Here is very basic jsfiddle example.

2
  • 1
    This is an incorrect use of the name attribute for radio inputs. Radio buttons in a group must have the same name if you are only wanting to allow for a single value from the group. Doing it this way makes it work like checkboxes, allowing for multiple selections instead of a single selection within the group.
    – MistyDawn
    Commented Apr 13, 2018 at 22:06
  • @MistyDawn you're right, I don't even remember how did I wrote this, probably it's from fixing a bug.
    – Yusuf Uzun
    Commented Apr 14, 2018 at 16:20
2

Here are 2 radio buttons namely rd1 and Radio1

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" /> 

The simplest wayt to check which radio button is checked ,by checking individual is(":checked") property

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }
2
  • This is not a very robust solution. It's better to just have a containing div, and then look at all the radios under it and select the checked on. You could also look at all radios with a certain name, and then find the checked one. This reduces having to change the code every time a button is added. Commented Oct 13, 2016 at 21:42
  • If your page has any more than 2 radio inputs this could get VERY confusing and assigning an id to every single radio would be very time consuming. This method would not typically be considered good practice.
    – MistyDawn
    Commented Apr 13, 2018 at 21:59
2

Another Easy way to understand... It's Working:

HTML Code:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Jquery Code:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});
2

multi group radio button covert value to array

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6

1
  • can you please add some explanation, so more people can understand. Commented Apr 1, 2019 at 10:10
1
HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});
1

Even input is not necessary as suggested by other answers. The following code can also be used:

var variable_name = $("[name='radio_name']:checked").val();
3
  • This is essentially the same as this answer from five years ago, just without the input and with unnecessary quote marks. Commented Dec 27, 2019 at 15:12
  • Those quotes are not unnecessary and the reason I have posted the above answer is to let people know that input ain't necessary
    – shivamag00
    Commented Dec 27, 2019 at 15:21
  • Then you should consider editing your question to mention those reasons rather than using the command "Use the following code". You may wish to reference a source that says the quotes are necessary. Commented Dec 27, 2019 at 15:24
1

HTML Markup :

<div class="form-group">
  <input id="rdMale" type="radio" class="clsGender" value="Male" name="rdGender" /> Male
  <input id="rdFemale" type="radio" class="clsGender" value="Female" name="rdGender" /> Female
 </div>

Get selected value by radio button Id:

 $("input[name='rdGender']").click(function () {
     alert($("#rdMale").val());
});

Get value by radiobutton Classname

 $(".clsGender").click(function () {
       alert($(this).val());
            //or
      alert($(".clsGender:checked").val());
   });

Get value by name

   $("input[name='rdGender']").click(function () {
          var rdVaule = $("input[name='rdGender']:checked").val();
          alert(rdVaule);
   });
1

For multiple radio buttons, you have to put same name attribute on your radio button tag. For example;

<input type="radio" name"gender" class="select_gender" value="male">
<input type="radio" name"gender" class="select_gender" value="female">

Once you have radio options, now you can do jQuery code like below to get he value of selected/checked radio option.

$(document).on("change", ".select_gender", function () {
   console.log($(this).val());    // Here you will get the current selected/checked radio option value
});

Note: $(document) is used because if the radio button are created after DOM 100% loaded, then you need it, because if you don't use $(document) then jQuery will not know the scope of newly created radion buttons. It's a good practice to do jQuery event calls like this.

Not the answer you're looking for? Browse other questions tagged or ask your own question.