A Checkbox and an onClick event Handler

A Checkbox and an onClick event Handler : CheckBox : Form Control JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Form Control » CheckBox »

A Checkbox and an onClick event Handler



<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>&nbsp;</P>
    </SPAN>
    </TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>