Javascript Form How to - Control CheckBox with RadioButton

Question

We would like to know how to control CheckBox with RadioButton.
Answer


<HTML>
    <HEAD>
        <SCRIPT LANGUAGE="JavaScript">
               function radio1Clicked()<!--from w ww .  j  a  va  2 s .co  m-->
               {
                    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>
        <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>
The code above is rendered as follows: