jQuery get value of selected radio button

Jquery Problem Overview

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?

Jquery Solutions

Solution 1 - Jquery

Just use.

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

It is that easy.

Solution 2 - Jquery

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

Solution 3 - Jquery

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.

Solution 4 - Jquery

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

Solution 5 - Jquery

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.

Solution 6 - Jquery

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

Solution 7 - Jquery

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

for nested attributes

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

Don't forget single braces for name

Solution 8 - Jquery

Get all radios:

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

Filter to get the one that's checked

radios.filter(":checked");

Another way you can find radio button value

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

Solution 9 - Jquery

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

Solution 10 - Jquery

This code works.

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

Solution 11 - Jquery

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

Solution 12 - Jquery

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>

Solution 13 - Jquery

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

Solution 14 - Jquery

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

Solution 15 - Jquery

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>

Solution 16 - Jquery

By Name only

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

Solution 17 - Jquery

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

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

I hope this will help.

Solution 18 - Jquery

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

Solution 19 - Jquery

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

Solution 20 - Jquery

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

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

Solution 21 - Jquery

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

Solution 22 - Jquery

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.

Solution 23 - Jquery

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

Solution 24 - Jquery

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

Solution 25 - Jquery

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

Solution 26 - Jquery

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

Solution 27 - Jquery

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

Solution 28 - Jquery

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.

Solution 29 - Jquery

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

Solution 30 - Jquery

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

Solution 31 - Jquery

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

Solution 32 - Jquery

 <div class="col-md-12">
   <div class="form-radio">
       <input class="radio-outlined" id="accept_new_login1" type="radio" name="aNL" value="1">
       <label for="accept_new_login1" class="radio-teal">Yes</label>
        <input class="radio-outlined" id="accept_new_login2" type="radio" name="aNL" value="0">
        <label for="accept_new_login2" class="radio-teal">No</label>
   </div>
</div>

<script>
  $("input[name=aNL]").on("click" , function () {
    console.log("test" ,$("#accept_new_login").val() , this.value , this.id );
  })

 </script>

This Solution is not only easy also tells selected ID and thats value. you can check my output.

Content Type	Original Author	Original Content on Stackoverflow
Question	user1114212	View Question on Stackoverflow
Solution 1 - Jquery	Parveen Verma	View Answer on Stackoverflow
Solution 2 - Jquery	Adam Rackis	View Answer on Stackoverflow
Solution 3 - Jquery	Hardik	View Answer on Stackoverflow
Solution 4 - Jquery	Purag	View Answer on Stackoverflow
Solution 5 - Jquery	Madhuka Dilhan	View Answer on Stackoverflow
Solution 6 - Jquery	Sumith Harshan	View Answer on Stackoverflow
Solution 7 - Jquery	user7516728	View Answer on Stackoverflow
Solution 8 - Jquery	Faisal	View Answer on Stackoverflow
Solution 9 - Jquery	Nadir	View Answer on Stackoverflow
Solution 10 - Jquery	keivan kashani	View Answer on Stackoverflow
Solution 11 - Jquery	Rajnesh Thakur	View Answer on Stackoverflow
Solution 12 - Jquery	anand	View Answer on Stackoverflow
Solution 13 - Jquery	MistyDawn	View Answer on Stackoverflow
Solution 14 - Jquery	Tadej Magajna	View Answer on Stackoverflow
Solution 15 - Jquery	saroj	View Answer on Stackoverflow
Solution 16 - Jquery	Arun Prasad E S	View Answer on Stackoverflow
Solution 17 - Jquery	vishpatel73	View Answer on Stackoverflow
Solution 18 - Jquery	Ashish	View Answer on Stackoverflow
Solution 19 - Jquery	user4258100	View Answer on Stackoverflow
Solution 20 - Jquery	Ntiyiso Rikhotso	View Answer on Stackoverflow
Solution 21 - Jquery	Badal	View Answer on Stackoverflow
Solution 22 - Jquery	Yusuf Uzun	View Answer on Stackoverflow
Solution 23 - Jquery	Vijay Deva	View Answer on Stackoverflow
Solution 24 - Jquery	alixcol	View Answer on Stackoverflow
Solution 25 - Jquery	shivamag00	View Answer on Stackoverflow
Solution 26 - Jquery	Mohan	View Answer on Stackoverflow
Solution 27 - Jquery	Satinder singh	View Answer on Stackoverflow
Solution 28 - Jquery	Tahir Afridi	View Answer on Stackoverflow
Solution 29 - Jquery	Sandeep kadyan	View Answer on Stackoverflow
Solution 30 - Jquery	Md. Sohel Rana	View Answer on Stackoverflow
Solution 31 - Jquery	Steffen	View Answer on Stackoverflow
Solution 32 - Jquery	pankaj	View Answer on Stackoverflow