CODEWITHSUNDEEP
javascripthtml
Mark Burgoyne
Mark Burgoyne

Reputation: 1594

How to set radio button status with JavaScript

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

Upvotes: 97

Views: 332749

Answers (9)

Rumments
Rumments

Reputation: 9

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

Upvotes: 0

Prajakta Kale
Prajakta Kale

Reputation: 391

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

Upvotes: 2

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92477

Try

myRadio.checked=true
<input type="radio" id="myRadio">My radio<br>

Upvotes: 4

Luigi D&#39;Amico
Luigi D&#39;Amico

Reputation: 701

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

Upvotes: 11

NuclearPeon
NuclearPeon

Reputation: 6059

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");

Upvotes: 3

Justin Helgerson
Justin Helgerson

Reputation: 25541

Vanilla Javascript:

yourRadioButton.checked = true;

jQuery:

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

or

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

Upvotes: 20

sbrbot
sbrbot

Reputation: 6447

You can also explicitly set value of radio button:

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

with the following script:

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

and corresponding radio button will be checked automatically.

Look at the example on JSFiddle.

Upvotes: 24

gaby de wilde
gaby de wilde

Reputation: 1323

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/

Upvotes: 48

Starx
Starx

Reputation: 78981

Very simple

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

Upvotes: 155

Related Questions