Hi,
I asked the question leading to the response referenced above. Pasted
below is my modified script that processes radio buttons as well as
check boxes.
I ended up wrapping the input tag within the label tag and using
parentNode instead of nextSibling. nextSibling worked fine in the
example referenced above but can easily break if the input and label
tags are formatted on different lines (whitespace becomes a text node
and becomes the nextSibling).
As stated in the referenced thread, my form is pretty dense and may have
a hundred check boxes or radio buttons. The buff-ish background and
crimson colors seem to work well for me. I think the indentation below
is messed up from my translation from tabs to spaces -- sorry.
Roger
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
highlight checkbox labels
</title>
<style type="text/css">
body {background: #FFEBCD; color: #382400; font-family:
verdana,arial,sans-serif;}
..unchecked{ font-size: xx-small;}
..checked{ font-size: xx-small; color:crimson; font-weight:bold;}
..noBorder {font-size: xx-small;}
..numeric {text-align: right;}
</style>
<script type="text/javascript">
// Change the class name of a checkbox or radio button label to
highlight checked items
function setLabelStyle(x){
if (x.checked){
x.parentNode.className="checked";
if (x.getAttribute("type") == "radio") {
xName = x.name;
set = document.getElementsByName(xName);
for (var i=0;i<set.length;i+=1) {
if (!set
.checked) {
set.parentNode.className="unchecked"; }
}
}
}
else{
x.parentNode.className="unchecked";
}
}
</script>
</head>
<body>
<form action="someaction">
<center>
<table>
<tr>
<td>
<label class="unchecked">
<input type="checkbox" id="check1"
onclick="setLabelStyle(this);">
Abraided
</label>
<br />
<label class="unchecked">
<input type="checkbox" id="check2"
onclick="setLabelStyle(this);">
Incised
</label>
<br />
<label class="unchecked">
<input type="checkbox" id="check3"
onclick="setLabelStyle(this);">
Pecked
</label>
<br />
<label class="unchecked">
<input type="checkbox" id="check4"
onclick="setLabelStyle(this);">
Scratched
</label>
<br />
</td>
<td>
<label class="unchecked">
<input type="radio" id="check21" name="myradio"
onclick="setLabelStyle(this);">
Abraided
</label>
<br />
<label class="unchecked">
<input type="radio" id="check22" name="myradio"
onclick="setLabelStyle(this);">
Incised
</label>
<br />
<label class="unchecked">
<input type="radio" id="check23" name="myradio"
onclick="setLabelStyle(this);">
Pecked
</label>
<br />
<label class="unchecked">
<input type="radio" id="check24" name="myradio"
onclick="setLabelStyle(this);">
Scratched
</label>
<br />
</td>
</tr>
</table>
</center>
</form>
</body>
</html>