With with RADIO and CheckBox : Radio Button « Form « JavaScript Tutorial

<HTML>
    <HEAD>
        <TITLE>Customize Your Pizza</TITLE>
        <SCRIPT LANGUAGE="JavaScript">
            <!--
               function radio1Clicked()
               {
                    clearCheckboxes()
                    document.form1.check1.checked = true
                    document.form1.check4.checked = true
                    displayCost()
               }

               function radio2Clicked()
               {
                    clearCheckboxes()
                    document.form1.check3.checked = true
                    document.form1.check4.checked = true
                    displayCost()
               }

               function radio3Clicked()
               {
                    clearCheckboxes()
                    document.form1.check2.checked = true
                    document.form1.check4.checked = true
                    displayCost()
               }

               function radio4Clicked()
               {
                    clearCheckboxes()
                    document.form1.check1.checked = true
                    document.form1.check2.checked = true
                    document.form1.check3.checked = true
                    document.form1.check4.checked = true
                    displayCost()
               }

               function radio5Clicked()
               {
                    clearCheckboxes()
                    document.form1.check1.checked = true
                    document.form1.check2.checked = true
                    document.form1.check3.checked = true
                    document.form1.check4.checked = true
                    document.form1.check5.checked = true
                    displayCost()
               }

               function clearCheckboxes()
               {
                    document.form1.check1.checked = false
                    document.form1.check2.checked = false
                    document.form1.check3.checked = false
                    document.form1.check4.checked = false
                    document.form1.check5.checked = false
               }

               function displayCost()
               {
                    var cost = 10.00

                    if(document.form1.check1.checked){
                        cost += .50
                    }
                    if(document.form1.check2.checked){
                        cost += .50
                    }
                    if(document.form1.check3.checked){
                        cost += .50
                    }
                    if(document.form1.check4.checked){
                        cost += .50
                    }
                    if(document.form1.check5.checked){
                        cost += .50
                    }
                    document.form1.text1.value = "Total cost: $" + cost.toPrecision(4)
               }
            //-->
       </SCRIPT>
    </HEAD>

    <BODY>
        <H1>Customize Your Pizza</H1>
        <BR>
        <FORM NAME="form1">
            <TABLE NAME="table1" BORDER BGCOLOR="cyan" WIDTH="200" ALIGN="LEFT">
                <TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio1Clicked()">A</TD></TR>
                <TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio2Clicked()">B</TD></TR>
                <TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio3Clicked()">C</TD></TR>
                <TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio4Clicked()">D</TD></TR>
                <TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio5Clicked()">E</TD></TR>
            </TABLE>

            <TABLE NAME="table2" BORDER BGCOLOR="cyan" WIDTH="200" ALIGN="LEFT">
                <TR><TD><INPUT TYPE="CHECKBOX" NAME="check1" ONCLICK="displayCost()">F</TD></TR>
                <TR><TD><INPUT TYPE="CHECKBOX" NAME="check2" ONCLICK="displayCost()">G</TD></TR>
                <TR><TD><INPUT TYPE="CHECKBOX" NAME="check3" ONCLICK="displayCost()">H</TD></TR>
                <TR><TD><INPUT TYPE="CHECKBOX" NAME="check4" ONCLICK="displayCost()">I</TD></TR>
                <TR><TD><INPUT TYPE="CHECKBOX" NAME="check5" ONCLICK="displayCost()">J</TD></TR>
            </TABLE>
            <BR CLEAR="ALL">
            <BR>
            <INPUT NAME="text1">
        </FORM>
    </BODY>
</HTML>

10.11.Radio Button
	10.11.1.	Radio
	10.11.2.	Radio.blur()
	10.11.3.	Radio.checked
	10.11.4.	Radio.click()
	10.11.5.	Radio.defaultChecked
	10.11.6.	Radio.focus()
	10.11.7.	Radio.form
	10.11.8.	Radio.handleEvent()
	10.11.9.	Radio.name
	10.11.10.	Radio.onBlur
	10.11.11.	Radio.onClick
	10.11.12.	Radio.onFocus()
	10.11.13.	Radio.type
	10.11.14.	Radio.value
	10.11.15.	Checking a Radio Button Group
	10.11.16.	With with RADIO and CheckBox
	10.11.17.	Cycle the selected radio buttons
	10.11.18.	An onclick Event Handler for Radio Buttons