javascript selected radio

Question

I want to check what is the selected radio input.

here is my code.

<input name="u_type" type="radio" value="staff" id="u_type" checked="checked" /> Staff
<input name="u_type" type="radio" value="admin" id="u_type" /> Admin
<input id="add_user" name="add_user" type="button" onclick="addUser();"  value="Add" class="submitButton admin_add" />

function addUser()
{
//how to check what is the selected radio input
}

thanks.

Uzziel

Any chance you're using jQuery or can use in your code? – Grandson

If you have only two buttons, this will help you: #1424277 – Skewer

Answer 1

function addUser() {
    //how to check what is the selected radio input
    alert(getCheckedRadioValue('u_type'));
}

function getCheckedRadioValue(name) {
    var elements = document.getElementsByName(name);

    for (var i=0, len=elements.length; i<len; ++i)
        if (elements[i].checked) return elements[i].value;
}

And element's IDs must be different.

Carabiniere

It should better be named getCheckedRadioValue since it does not return the radios HTML id as it may suggest! – Strenta

@sorx00 AFAICT ++i would skip the first occurrence though, I'm more keen on i++ – Unclasp

@metaleap i don't think so #3470385 – Carabiniere

Answer 2

To get the value of the checked radio button, without jQuery:

var radios = document.getElementsByName("u_type");
for(var i = 0; i < radios.length; i++) {
    if(radios[i].checked) selectedValue = radios[i].value;   
}

(assuming that selectedValue is a variable declared elsewhere)

Salaidh

Answer 3

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

will get you the value of the selected option which you can, of course, assign to a variable. Due to admonishment, I should also point out that this is jquery, a handy javascript library for making DOM manipulation easier and with excellent cross-browser compatibility. It can be found here.

Situate

OP didn't say anything about jQuery. – Skewer

True, but jquery is javascript. – Situate

@kinakuta: So? If a question is only tagged with javascript you should assume that no other library should be used. And if you use one, you should clearly state this in your answer and link to it. – Skewer

I've edited my post to point this out. Jquery shouldn't be omitted as an answer in my view just because it hasn't been tagged asking for it, but point taken about clarifying the use of the library. – Situate

@kinakuta: There have been quite a few discussion about this. Sure, jQuery solutions should also be considered. But it should not be taken for granted that jQuery can be used... anyway, thank you for clarifying. – Skewer

I assume you meant to say should not be taken for granted, but since I just stated point taken, I think it's clear the point was taken. – Situate

Or use the standard interface: document.querySelector('input[name=u_type]:checked").checked – Angora

Answer 4

I know this is an old question, but the answers given seem overly complex.

As pointed out earlier, you should not have two elements with the same id. That violates the html spec. Just remove the id attributes, or make them two different values. Then simply use this to get the checked value:

document.querySelector("input[type='radio'][name='u_type']:checked").value

Octahedrite

Answer 5

Alternatively to kmb385's suggestion you could wrap your inputs in a form, and make sure all of the input names are different (you have two u_type) names.

Then you can access the inputs as document.formname.inputname.checked, which will return true or false.

Terramycin

And if you look at value instead of checked, it gives you the name of the button that is checked. No looping, nothing, just straight accessing the value that javascript wanted to make easy for you to get at. I don't know why this answer isn't rated higher. – Denverdeny

Answer 6

You shouldn't have two radio elements with the same id. You need to change one of the ids then check both radio buttons like:

if(document.getElementById("u_type").checked == true)
{
   //do something
}

I would recommend using jquery to do this instead of native js.

Toddtoddie

There is no reason to load ALL of jQuery when a couple lines of code will suffice. – Terramycin

Agreed. I get a little stovepiped because when I think js I think jquery. It depends on the circumstances. – Toddtoddie

Why are you comparing a boolean against true? if(document.getElementById("u_type").checked) – Angora

Answer 7

The following is the jQuery implementation to get the value of a radio button

$("#u_type").click(function() {
var value = $(this).val();
});

If you want to use javascript, then:

function get_radio_value()
{
for (var i=0; i < document.form.u_type.length; i++)
{
   if (document.form.u_type[i].checked)
   {
   var val = document.form.u_type[i].value;
   }
  }
}

Pegmatite