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

实现代码如下：

<HTML>
    <HEAD>
        <  LANGUAGE=\" \">
               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)
               }
       </ >
    </HEAD>
    <BODY>
        <FORM NAME=\"form1\">
            <TABLE NAME=\"table1\" BORDER BGCOLOR=\"cyan\" WIDTH=\"200\" ALIGN=\"LEFT\">
                <TR><TD><INPUT TYPE=\"RADIO\" NAME=\"radios\"  =\"radio1Clicked()\">A</TD></TR>
                <TR><TD><INPUT TYPE=\"RADIO\" NAME=\"radios\"  =\"radio2Clicked()\">B</TD></TR>
                <TR><TD><INPUT TYPE=\"RADIO\" NAME=\"radios\"  =\"radio3Clicked()\">C</TD></TR>
                <TR><TD><INPUT TYPE=\"RADIO\" NAME=\"radios\"  =\"radio4Clicked()\">D</TD></TR>
                <TR><TD><INPUT TYPE=\"RADIO\" NAME=\"radios\"  =\"radio5Clicked()\">E</TD></TR>
            </TABLE>

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

在线运行

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月15日 星期五

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章