-Lost wrote:
"apparker" <ad**********@gmail.comwrote in message
news:11********************@o5g2000hsb.googlegroup s.com...
>>>>>>I'm creating a new GUI for a program and it is for a medical exam.
>>There are so many different things to ask someone during a history it
>>wastes too much space to make checkboxes for everything so I had an
>>idea:
>>Can I simply create a list of conditions and when the doctor clicks
>>them, they turn red? And clicking them again would make them default
>>again? This would really make the exam better since the doctor could
>>quickly glance at a page of hundreds of things and see what the person
>>has.
>You are in luck. Very recently someone threw together a nifty example.
>http://groups.google.com/group/comp....wse_thread/thr...
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[i].checked) {
set[i].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>
