js实现radio单选框控制多组checkbox复选框

时间:2017-03-21
有一组单选框radio,我们想使用单选框radio来控制哪些checkbox复选框被选中,哪些checkbox复选框不被选中,本文章向大家介绍javascript实现radio单选框控制多组checkbox复选框的实例,需要的朋友可以参考一下。

我们想知道如何用RadioButton控制CheckBox。

实现代码如下:

<HTML>
    <HEAD>
        <SCRIPT LANGUAGE="JavaScript">
               function radio1Clicked()<!-- from http://www.manongjc.com  码农教程  -->
               {
                    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>

在线运行