[jquery] jQuery get value of selected radio button

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?

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

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

Just use.

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

So easy it is.

    <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 >

$(function() {
      $("#submit").click(function() {
        alert($('input[name=s_2_1_6_0]:checked').val());
      });
    });`

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

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.

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

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

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>

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.

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

2. 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.

<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....:-}

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(){_x000D_
  var section = $('input:radio[name="sec_num"]:checked').val();_x000D_
  var question = $('input:radio[name="qst_num"]:checked').val();_x000D_
  _x000D_
  var selectedVal = checkVal(section, question);_x000D_
  $('#show_val_div').text(selectedVal);_x000D_
  $('#show_val_div').show();_x000D_
});_x000D_
_x000D_
function checkVal(section, question) {_x000D_
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";_x000D_
  return value;_x000D_
}

* { margin: 0; }_x000D_
div { margin-bottom: 20px; padding: 10px; }_x000D_
h5, label { display: inline-block; }_x000D_
.small { font-size: 12px; }_x000D_
.hide { display: none; }_x000D_
#formDiv { padding: 10px; border: 1px solid black; }_x000D_
.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>_x000D_
_x000D_
<div class="center">_x000D_
  <div>_x000D_
    <h4>Section 1</h4>_x000D_
_x000D_
    <h5>First question text</h5>_x000D_
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>_x000D_
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>_x000D_
    <br/>_x000D_
    <h5>Second question text</h5>_x000D_
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>_x000D_
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>_x000D_
    <br/>_x000D_
    <h5>Third Question</h5>_x000D_
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>_x000D_
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>_x000D_
  </div>_x000D_
_x000D_
  <div>_x000D_
    <h4>Section 2</h4>_x000D_
    <h5>First question text</h5>_x000D_
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>_x000D_
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>_x000D_
    <br/>_x000D_
    <h5>Second question text</h5>_x000D_
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>_x000D_
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>_x000D_
    <br/>_x000D_
    <h5>Third Question</h5>_x000D_
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>_x000D_
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>_x000D_
  </div>_x000D_
_x000D_
  <div>_x000D_
    <h4>Section 3</h4>_x000D_
    <h5>First question text</h5>_x000D_
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>_x000D_
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>_x000D_
    <br/>_x000D_
    <h5>Second question text</h5>_x000D_
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>_x000D_
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>_x000D_
    <br/>_x000D_
    <h5>Third Question</h5>_x000D_
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>_x000D_
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
_x000D_
<div id="formDiv" class="center">_x000D_
  <form target="#show_val_div" method="post">_x000D_
    <p>Choose Section Number</p>_x000D_
    <label class="small">_x000D_
      <input type="radio" name="sec_num" value="1"> 1</label>_x000D_
    <label class="small">_x000D_
      <input type="radio" name="sec_num" value="2"> 2</label>_x000D_
    <label class="small">_x000D_
      <input type="radio" name="sec_num" value="3"> 3</label>_x000D_
    <br/><br/>_x000D_
    _x000D_
    <p>Choose Question Number</p>_x000D_
    <label class="small">_x000D_
      <input type="radio" name="qst_num" value="1"> 1</label>_x000D_
    <label class="small">_x000D_
      <input type="radio" name="qst_num" value="2"> 2</label>_x000D_
    <label class="small">_x000D_
      <input type="radio" name="qst_num" value="3"> 3</label>_x000D_
    <br/><br/>_x000D_
    _x000D_
    <input id="submit" type="submit" value="Show Value">_x000D_
    _x000D_
  </form>_x000D_
  <br/>_x000D_
  <p id="show_val_div"></p>_x000D_
</div>_x000D_
<br/><br/><br/>

if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something

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

for nested attributes

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

Don't forget single braces for name

$("#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(){...});).

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

By Name only

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

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

In case you don't know the sepcific name or want to check all radio inputs in a form, you can use a global var to check for each radio group the value only once: `

        var radio_name = "";
        $("form).find(":radio").each(function(){
            if (!radio_name || radio_name != $(this).attr('name')) {
                radio_name = $(this).attr('name');
                var val = $('input[name="'+radio_name+'"]:checked').val();
                if (!val) alert($('input[name="'+radio_name+'"]:checked').val());
            }
        });`

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");
   }

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>

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

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

`

multi group radio button covert value to array

var arr = [];_x000D_
    function r(n) {_x000D_
_x000D_
_x000D_
        var section = $('input:radio[name="' + n + '"]:checked').val();_x000D_
        arr[n] = section;_x000D_
_x000D_
        console.log(arr)_x000D_
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1_x000D_
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2_x000D_
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3_x000D_
_x000D_
<br>_x000D_
_x000D_
<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4_x000D_
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5_x000D_
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6

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.

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");
        }
    }
});

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

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

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

I hope this will help.