How to set radio button status with JavaScript

Question

What method would be best to use to selectively set a single or multiple radio button(s) to a desired setting with JavaScript?

@Starx - jQuery took care of my most recent rash; surely it can check radio buttons! — Justin Helgerson
– Justin Helgerson, Commented Feb 28, 2012 at 5:02
@RintoGeorge, I agree, i love jQuery too, but this is too simple. We dont need jQuery for this. — Starx
– Starx, Commented Feb 28, 2012 at 5:04

Starx · Accepted Answer · 2012-02-28 04:58:20Z

160

Very simple

radiobtn = document.getElementById("theid");
radiobtn.checked = true;

answered Feb 28, 2012 at 4:58

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mark Burgoyne Over a year ago

Sweet - nice and easy thankyou. If I was to try to modify a nuber of radio buttons with sequential id's radio1, radio2 etc, then it might be ...... function check_radio() { for (var i = 1, radiobtn; radiobtn = document.getElementById("radio" + i); ++i) radiobtn.checked = true; }

Rafael Barros Over a year ago

I think radiobtn.checked should receive 'checked' instead of true, although i can't remember where i read this.

asontu Over a year ago

@RafaelBarros, you're confusing the Javascript-property .checked with the xhtml-attribute checked="checked". Since xhtml tried to be xml-compliant, no attributes without value were allowed (in contrast to html 4 or 5 where <sometag checked> is correct syntax). Regardless of which mark-up language you're using, Javascript is Javascript and in Javascript objects have properties which could very well be a boolean value. Indeed, the DOM object associated with <input type="radio" /> has a property .checked which can be true or false.

Sandro Over a year ago

I suggest to add var before radiobtn = ... to avoid having it in the global scope.

Aidan Stanger Over a year ago

If you're using another button to activate it, it's even simpler: just include onclick="theid.checked=true" in the input tag of the activating button.

gaby de wilde · Accepted Answer · 2013-04-19 19:22:28Z

the form

<form name="teenageMutant">
  <input value="aa" type="radio" name="ninjaTurtles"/>
  <input value="bb" type="radio" name="ninjaTurtles"/>
  <input value="cc" type="radio" name="ninjaTurtles" checked/>
</form>

value="cc" will be checked by default, if you remove the "checked" non of the boxes will be checked when the form is first loaded.

document.teenageMutant.ninjaTurtles[0].checked=true;

now value="aa" is checked. The other radio check boxes are unchecked.

see it in action: http://jsfiddle.net/yaArr/

You may do the same using the form id and the radio button id. Here is a form with id's.

<form id="lizardPeople" name="teenageMutant">
  <input id="dinosaurs" value="aa" type="radio" name="ninjaTurtles"/>
  <input id="elephant" value="bb" type="radio" name="ninjaTurtles"/>
  <input id="dodoBird" value="cc" type="radio" name="ninjaTurtles" checked/>
</form>

value="cc" is checked by default.

document.forms["lizardPeople"]["dinosaurs"].checked=true;

now value="aa" with id="dinosaurs" is checked, just like before.

See it in action: http://jsfiddle.net/jPfXS/

Quentin · Accepted Answer · 2025-03-13 11:07:15Z

26

You can also explicitly set value of radio button with the following script:

document.gendersForm.gender.value = "F";

<form name="gendersForm">
  <input type="radio" name="gender" value="M" /> Man
  <input type="radio" name="gender" value="F" /> Woman
</form>

and corresponding radio button will be checked automatically.

edited Mar 13 at 11:07

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

answered Sep 10, 2014 at 14:43

sbrbot

6,5357 gold badges49 silver badges83 bronze badges

1 Comment

GM-Script-Writer-62850 Over a year ago

Works perfect until you try it in IE <.<

Grkxbvn · Accepted Answer · 2016-09-20 04:47:53Z

20

Vanilla Javascript:

yourRadioButton.checked = true;

jQuery:

$('input[name=foo]').prop('checked', true);

or

$("input:checkbox").val() == "true"

edited Sep 20, 2016 at 4:47

Grkxbvn

1,65919 silver badges27 bronze badges

answered Feb 28, 2012 at 4:57

Justin Helgerson

25.7k19 gold badges104 silver badges128 bronze badges

7 Comments

Mark Burgoyne Over a year ago

Thanks - yes I had checked and found a number of different methods. Unfortunatley after a trying a few I was not having much success. Appreciate your time

Justin Helgerson Over a year ago

@vinomarky - The thought crossed my mind, but I didn't want to come across as a bully. I don't actually care that much if a question is posted here that can be found elsewhere.

Deepakmahajan Over a year ago

@vinomarky : i still not get why u delete my post as ur qus posted get negative point.

Mark Burgoyne Over a year ago

@Deepakmahajan: Sorry, have no idea of what you refer to. I have never deleted anyones posts, in fact I dont even think I have priviledge to do so even if I wanted to

vapcguy Over a year ago

It's actually funny, because I am sure I've used that 2nd jQuery method with [0], [1], [2], etc. after the $(...) part of it to do this before, but when I just tried $('input[name=foo]')[0].attr('checked', true); I got Object doesn't support this property or method. Same thing if I put ('checked', 'checked'). But when I mixed the JavaScript with the jQuery option and did $('input[name=foo]')[0].checked = true; it set just fine. Odd.

|

Luigi D'Amico · Accepted Answer · 2017-07-19 11:10:48Z

11

/**
 * setCheckedValueOfRadioButtonGroup
 * @param {html input type=radio} vRadioObj 
 * @param {the radiobutton with this value will be checked} vValue 
 */
function setCheckedValueOfRadioButtonGroup(vRadioObj, vValue) {
    var radios = document.getElementsByName(vRadioObj.name);
    for (var j = 0; j < radios.length; j++) {
        if (radios[j].value == vValue) {
            radios[j].checked = true;
            break;
        }
    }
}

answered Jul 19, 2017 at 11:10

Luigi D'Amico

7197 silver badges11 bronze badges

Comments

NuclearPeon · Accepted Answer · 2017-07-12 01:15:43Z

3

I am configuring a radio button within a document fragment and tried using radiobtn.checked = true;.

That didn't work so I instead went with this solution:

radiobtn.setAttribute("checked", "checked");

answered Jul 12, 2017 at 1:15

NuclearPeon

6,1175 gold badges51 silver badges57 bronze badges

2 Comments

NuclearPeon Over a year ago

You can also use radiobtn.setAttribute("checked", ""); to select it.

epicrato Over a year ago

This is what works if you are using Stimulus in 2023.

Kamil Kiełczewski · Accepted Answer · 2025-03-13 10:16:51Z

3

Try

myRadio.checked=true

<input type="radio" id="myRadio">My radio<br>

edited Mar 13 at 10:16

answered Nov 7, 2019 at 21:33

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Comments

Dharman · Accepted Answer · 2019-11-12 14:20:07Z

1

$("#id_of_radiobutton").prop("checked", true);

edited Nov 12, 2019 at 14:20

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Dec 7, 2018 at 10:56

Prajakta Kale

3974 silver badges19 bronze badges

2 Comments

Martha Over a year ago

This is jQuery, not JavaScript, innit?

Quentin Mar 13 at 11:05

Well, jQuery is JavaScript … but if you're going to introduce a third party library to solve a problem then you should at least explain that you are doing so (and preferably justify it … which would be hard for something this trivial even in 2018).

Rumments · Accepted Answer · 2022-07-15 13:40:12Z

This sets checked using name to cycle through the elements and a value check to set the desired element to true. I kept it as simple as possible, its pretty easy to put it into a function or a loop, etc.

variable 'nameValue' is the radio elements name value

variable 'value' when matched sets the radio button

Array.from(  document.querySelectorAll('[name="' + nameValue + '"]')   ).forEach((element,index) =>
                {
                    if (value === element.value) {
                        element.checked = true;
                    } else {
                        element.checked = false;
                    }
                });

Collectives™ on Stack Overflow

How to set radio button status with JavaScript

9 Answers 9

5 Comments

Comments

1 Comment

7 Comments

Comments

2 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

Comments

1 Comment

7 Comments

Comments

2 Comments

Comments

2 Comments

Comments

Linked

Related