|
<HTML>
<HEAD>
<TITLE>Checkbox Event Handler</TITLE>
<STYLE TYPE="text/css">
#monGroup {visibility:hidden}
#comGroup {visibility:hidden}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function toggle(chkbox, group) {
var visSetting = (chkbox.checked) ? "visible" : "hidden"
document.getElementById(group).style.visibility = visSetting
}
function swap(radBtn, group) {
var group2VisSetting = (group == "group2") ? ((radBtn.checked) ? "" : "none") : "none"
var group3VisSetting = (group == "group3") ? ((radBtn.checked) ? "" : "none") : "none"
document.getElementById("group2").style.display = group2VisSetting
document.getElementById("group3").style.display = group3VisSetting
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<TABLE BORDER=1>
<TR><TD><INPUT TYPE="checkbox" NAME="monitor" onClick="toggle(this, 'monGroup')">Monitor</TD>
<TD>
<SPAN ID="monGroup">
<INPUT TYPE="radio" NAME="type3">A
<INPUT TYPE="radio" NAME="type3">B
<INPUT TYPE="radio" NAME="type3">C
<INPUT TYPE="radio" NAME="type3">D
</SPAN>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="checkbox" NAME="comms" onClick="toggle(this, 'comGroup')">Communications
</TD>
<TD>
<SPAN ID="comGroup">
<P><INPUT TYPE="radio" NAME="commType" onClick="swap(this, 'group2')">Modem
<INPUT TYPE="radio" NAME="commType" onClick="swap(this, 'group3')">Network</P>
<P><SPAN ID="group2" STYLE="display:none">
<INPUT TYPE="radio" NAME="type2">A
<INPUT TYPE="radio" NAME="type2">B
<INPUT TYPE="radio" NAME="type2">C
<INPUT TYPE="radio" NAME="type2">D
</SPAN>
<SPAN ID="group3" STYLE="display:none">
<INPUT TYPE="radio" NAME="type1">A
<INPUT TYPE="radio" NAME="type1">B
<INPUT TYPE="radio" NAME="type1">C
</SPAN> </P>
</SPAN>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
|
