A radio button question

Forum Moderators: open

Message Too Old, No Replies

A radio button question

onchange event on all radio buttons

tntpower

6:15 pm on Dec 31, 2008 (gmt 0)

I have a form that has many radio buttons.

Instead of adding onchange event to each of them, can I simply add an event to the form so that whenever there is an onchange event on radio buttons, I can call JS to bold corresponding radio button's text (if checked) or un-bold the text (if unchecked).

Thanks.

tntpower

7:21 pm on Dec 31, 2008 (gmt 0)

By the way, radio buttons in my page look like this:

<td><input type="radio" name="item178" value="4" >Extremely helpful</td>

...

<td><input type="radio" name="item179" value="4" >Extremely helpful</td>

When people click radio buttons, I want to bold selected button's text (Lots of Help or Extremely Helpful) or un-bold them.

Thanks.

birdbrain

7:43 pm on Dec 31, 2008 (gmt 0)

Hi there tntpower,

does this help...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><style type="text/css">
label {
display:block;
margin:4px 0;
}
.bold {
font-weight:bold;
}
</style>
<script type="text/javascript">
if(window.addEventListener){
 window.addEventListener('load',boldLabels,false);
 }
else { 
if(window.attachEvent){
 window.attachEvent('onload',boldLabels);
 }
 }
function boldLabels(){
inps=document.forms[0].getElementsByTagName('input');
for(c=0;c<inps.length;c++) {
if(inps[c].type=='radio'){
inps[c].checked=false;
inps[c].onclick=function() { 
for(c=0;c<inps.length;c++) {
if(inps[c].name==this.name){
inps[c].parentNode.className='';
}
}
this.parentNode.className='bold';
}
}
}
}
</script>
</head>
<body>
<form action="#">
<div>
<label><input type="radio" name="item176"> Lots of help</label>
<label><input type="radio" name="item176"> Extremely helpful</label>
<label><input type="radio" name="item177"> Lots of help</label>
<label><input type="radio" name="item177"> Extremely helpful</label>
<label><input type="radio" name="item178"> Lots of help</label>
<label><input type="radio" name="item178"> Extremely helpful</label>
<label><input type="radio" name="item179"> Lots of help</label>
<label><input type="radio" name="item179"> Extremely helpful</label>
</div>
</form>
</body>
</html>

birdbrain

tntpower

7:54 pm on Dec 31, 2008 (gmt 0)

Hi birdbrain,

It works like a charm!

Many thanks.

birdbrain

8:05 pm on Dec 31, 2008 (gmt 0)

No problem, you're very welcome. ;)