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.

• user447356: Any chance you're using jQuery or can use in your code?
• Felix Kling: If you have only two buttons, this will help you: stackoverflow.com/questions/1423777/…

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.

• Andreas Covidiot: It should better be named getCheckedRadioValue since it does not return the radios HTML id as it may suggest!
• meta_leap: @sorx00 AFAICT ++i would skip the first occurrence though, I'm more keen on i++
• Roman Sklyarov: @metaleap i don't think so stackoverflow.com/questions/3469885/…

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)

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.

• Felix Kling: OP didn't say anything about jQuery.
• kinakuta: True, but jquery is javascript.
• Felix Kling: @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.
• kinakuta: 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.
• Glenn Maynard: Or use the standard interface: document.querySelector('input[name=u_type]:checked").checked

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

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.

• Trevortni: 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.

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.

• jsonnull: There is no reason to load ALL of jQuery when a couple lines of code will suffice.
• Kevin Bowersox: Agreed. I get a little stovepiped because when I think js I think jquery. It depends on the circumstances.
• Glenn Maynard: Why are you comparing a boolean against true? if(document.getElementById("u_type").checked)

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