jQuery get value of selected radio button

Question

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?

Answer 1

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.

Answer 2

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

for nested attributes

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

Don't forget single braces for name

Answer 3

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.

Answer 4

By Name only

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

Answer 5

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

Answer 6

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