Set Checked Radio Button Using a JavaScript Variable

Question

Is there a way to set the checked radio button using a JavaScript variable? I was hoping I could get the radio button by ID and update the checked radio.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
var shirtColor = "green";

document.getElementById(shirtColor); 
</script>
</head>

<body>
<p>Shirt Color:
<input type="radio" name="shirtColor" id="red" value="red" />
Red
<input type="radio" name="shirtColor" id="green" value="green" />
Green
<input type="radio" name="shirtColor" id="blue" value="blue" /> 
Blue</p>
</body>
</html>

Joseph Silber · Accepted Answer · 2013-01-30 20:24:15Z

26

Just set its checked property to true:

document.getElementById(shirtColor).checked = true;

Here's the fiddle: http://jsfiddle.net/akkSY/

edited Jan 30, 2013 at 20:24

answered Jan 30, 2013 at 20:17

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

1 Comment

Joseph Silber Over a year ago

@user1822824 - You have to wait for the elements to be available. Put your script at the bottom of the body tag, after those elements are already on the page.

igarcia · Accepted Answer · 2013-01-30 20:18:35Z

3

It would look like that

btn = document.getElementById("itsID");
btn.checked = true;

answered Jan 30, 2013 at 20:18

igarcia

7112 gold badges11 silver badges27 bronze badges

1 Comment

igarcia Over a year ago

Probably because you have to put shirtColor instead of itsID, 'itsID' was used as an example

Vishal · Accepted Answer · 2014-05-15 05:13:48Z

2

you can use jquery in this way

$("control_id").attr("checked",true);

be sure that element is loaded before this jquery is executed.. to be safe you should always put scripts in the end of the page before </body> tag

answered May 15, 2014 at 5:13

Vishal

82612 silver badges20 bronze badges

Collectives™ on Stack Overflow

Set Checked Radio Button Using a JavaScript Variable

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related