Updating label fields depending on radio button selection [Archive]

Click to See Complete Forum and Search --> : Updating label fields depending on radio button selection

solidfilter

07-15-2006, 09:11 PM

I'm trying to achieve an effect with JavaScript that goes like this:

The user has a few radio buttons to choose from on a form. Each radio button has it's own label. The default text style for the label is say black and not bold. When the user clicks on one of the radio buttons I want the corresponding label to the radio button to become bold and change to a different color.

Basically I want this so the users can easily find out what selection they had made without guessing. I've tried several things but I just can't seem to figure it out. Any help would be great, thanks!

(I'm not good with JavaScript, I spend all my time with xhtml, css, php, and mysql so I haven't found time to learn the language)

JUD

07-15-2006, 10:28 PM

I think this should get you started:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script type="text/javascript">
// <[CDATA[ //
function updateLabel(frm){
var elems = frm.getElementsByTagName("INPUT");

for(var i = 0; i < elems.length; i++){
elems[i].nextSibling.className = (elems[i].type == "radio" && elems[i].checked) ? "selected" : "unselected";
}
}
// ]]> //
</script>
</head>

<body>
<form>
<input type="radio" name="myRadio" onclick="updateLabel(this.form)" /><label class="unselected">Option 1</label><br />
<input type="radio" name="myRadio" onclick="updateLabel(this.form)" /><label class="unselected">Option 2</label><br />
<input type="radio" name="myRadio" onclick="updateLabel(this.form)" /><label class="unselected">Option 3</label>
</form>
</body>
</html>

solidfilter

07-16-2006, 12:13 AM

Very cool. That's exactly what I had in mind. Thanks so much for the quick and informative reply!