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>
- 分享WordPress Mobile Pack汉化精简版及隐藏指定插件更新提示的方法
- Tomcat重启脚本For Windows
- js获取url中?后的参数,修复移动版无法切换到电脑版的BUG
- nginx配置文件参数详解
- LVS中Windows作为真实主机(RealServer)时的设置方法
- 菜鸟教程:Ngnix安装详解
- 教你如何去掉友荐和无觅的隐藏外链和版权链接
- 重置多说配置后的问题,这是不让我从良的节奏啊(附禁用谷歌在线字体的方法)!
- 10个超有趣的Linux命令
- 张戈博客惊现WordPress恶意代码,各位WP博主要注意下了!
- 分享一个多说头像的动态酷炫CSS样式
- 在Linux中发现IP地址冲突的方法
- 教你如何查看Linux的CPU负载
- 想打造一个神经网络,自动给黑白照片上色?这儿有一份超详细教程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 13-6 编辑多个文件和保存
- 汇编基础
- php 使用AMQP扩展调用RabbitMq
- 聊聊RedisTokenVisitor
- R语言几行代码拼接pdf文件
- 一次 Redis 分布式锁事故,整个项目组被扣绩效了。。。
- 小程序访问https显示网络错误,微信打开https空白、浏览器访问正常 解决方案
- Python GUI项目实战(七)学生信息的修改、删除和保存
- Python | 使用argparse解析命令行参数
- LeetCode 98 | 判断二叉搜索树是否合法
- LeetCode 96,n个数构建BST的方法有多少种?
- Go语言 | goroutine不只有基础的用法,还有这些你不知道的操作
- 每日一题 | 二进制操作问题
- Pandas | Dataframe的merge操作,像数据库一样尽情join
- 每日一题 | 灾后重建问题