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.

If you have only two buttons, this will help you: http://stackoverflow.com/questions/1423777/how-can-i-check-if-a-radio-button-is-selected-in-javascript — Felix Kling, Jun 30 '11 at 10:25

Roman Sklyarov · Accepted Answer · 2015-04-20T15:39:32.073

21

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.

edited Apr 20 '15 at 15:39

answered Jun 30 '11 at 10:17

Roman Sklyarov

949
8
20

3

It should better be named *getCheckedRadioValue* since it does not return the radios HTML id as it may suggest! – Andreas Covidiot Dec 16 '14 at 08:34
@sorx00 AFAICT `++i` would skip the first occurrence though, I'm more keen on `i++` – metaleap Dec 08 '16 at 12:02
@metaleap i don't think so http://stackoverflow.com/questions/3469885/somevariable-vs-somevariable-in-javascript – Roman Sklyarov Dec 14 '16 at 16:06

score 6 · Answer 2 · answered Jun 30 '11 at 10:14

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)

kinakuta · Answer 3 · 2011-06-30T10:23:37.037

5

$('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.

edited Jun 30 '11 at 10:23

answered Jun 30 '11 at 10:10

kinakuta

9,029
1
39
48

OP didn't say anything about jQuery. – Felix Kling Jun 30 '11 at 10:18
2

True, but jquery is javascript. – kinakuta Jun 30 '11 at 10:20
2

@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. – Felix Kling Jun 30 '11 at 10:21
1

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. – kinakuta Jun 30 '11 at 10:25
@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. – Felix Kling Jun 30 '11 at 10:27
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. – kinakuta Jun 30 '11 at 10:30
3

Or use the standard interface: document.querySelector('input[name=u_type]:checked").checked – Glenn Maynard Mar 10 '14 at 22:12

score 3 · Answer 4 · answered May 11 '19 at 15:44

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

score 2 · Answer 5 · answered Jun 30 '11 at 10:12

2

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.

answered Jun 30 '11 at 10:12

jsonnull

415
3
12

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. – Trevortni Nov 25 '20 at 21:08

score 0 · Answer 6 · answered Jun 30 '11 at 10:10

0

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.

answered Jun 30 '11 at 10:10

Kevin Bowersox

93,289
19
159
189

2

There is no reason to load ALL of jQuery when a couple lines of code will suffice. – jsonnull Jun 30 '11 at 10:12
Agreed. I get a little stovepiped because when I think js I think jquery. It depends on the circumstances. – Kevin Bowersox Jun 30 '11 at 10:30
Why are you comparing a boolean against true? `if(document.getElementById("u_type").checked)` – Glenn Maynard Mar 10 '14 at 22:13

score -1 · Answer 7 · answered Jun 30 '11 at 10:08

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

javascript selected radio

7 Answers7

Linked

Related