HTML复选框和单选框 checkbox和radio事件介绍


Posted in Javascript onDecember 12, 2012

checkbox 和 radio的事件选择一度让我很迷惑。

开始以我对js的理解,我觉得change事件应该是最合理的,可惜啊ie下change事件是在改变后焦点离开时才触发。
后来就用click mousedown等鼠标事件代替。发现click比mousedown要更完美一些:

radio注册了click事件以后,神奇的是用键盘上的上下左右选择时,居然会触发鼠标事件,滚轮也会触发,这种神奇的事情在mousedown下面是不会发生的。(webkit不能使用上下左右选择)
checkbox注册click事件后,奇迹再次上演,当我们用空格选中checkbox时,神奇的click事件再次触发,而mousedown再次与奇迹擦身而过。(webkit还是不能用空格选择)

让我们都用click吧,给这两位老兄减负吧,不要为了他们先天不足给他们绑定一堆事件了,对于这两个家伙click才是万能的。膜拜一下~~~

在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在HTML的<input>标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚至全选。请看下面的例子:

下面给出这个例子的源代码,结合代码来讲各参数的设置:
<form name="form1" >
你是否喜欢旅游?请选择:

<input type="radio" name="radiobutton" value="radiobutton" checked> 喜欢 
<input type="radio" name="radiobutton" value="radiobutton"> 不喜欢 
<input type="radio" name="radiobutton" value="radiobutton"> 无所谓<br>

您对那些运动感兴趣,请选择:
<input type="checkbox" name="checkbox1" value="checkbox"> 跑步 
<input type="checkbox" name="checkbox2" value="checkbox"> 打球 
<input type="checkbox" name="checkbox3" value="checkbox"> 登山 
<input type="checkbox" name="checkbox4" value="checkbox"> 健美<br> 
</form>

从上面的源代码中可看出,制作单选框只要把<input>标记的type参数设置为type="radio"就行了;而制作复选框则只要把<input>标记的type参数设置为type="checkbox"就行了。至于实际应用中用那种选择框,要根据实际需要而定。若只需用户有一种选择的,就用单选框,如本例中“你是否喜欢旅游?”这个问题,用户只能是一种选择,所以采用了单选框;若允许用户有多项选择的内容,则采用复选框,如本例中的“你对那些运动感兴趣?”这个问题,因一个人的兴趣可能是多方面的,所以采用了复选框。

在<input>标记中设定checked参数,则该选框就被默认选中。如本例的第一个单选框(“喜欢”下面那个单选框)就设置为默认选中,这样用户若是想选择“喜欢”的话,就可以不用再选了,当然,若用户要选择了“不喜欢”,则只要点击“不喜欢”下的那单选框,而默认值被自动取消。用同样的方法也可以设置某个复选框为默认被选中。但是复选框的默认选中不可滥用,否则会引起用户的反感。

在radio里面千万要注意记得把所有的<input type='radio'>这个对象的name属性都设为相同的,比如说上例的 name="radiobutton" ,记住不是ID属性,只有这样才能实现单选的效果,不然的话上面例子的‘喜欢'、‘不喜欢'、‘无所谓'就可以同时选上了,切记!

Javascript 相关文章推荐
js jq 单击和双击区分示例介绍
Nov 05 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
Vue render深入开发讲解
Apr 13 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
angularjs性能优化的方法
Sep 05 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 #Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 #Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 #Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 #Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 #Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 #Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 #Javascript
You might like
php 生成唯一id的几种解决方法
2013/03/08 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
摘自百度的图片轮换效果代码
2007/11/19 Javascript
javascript 尚未实现错误解决办法
2008/11/27 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
js的hasownproperty使用示例
2014/03/02 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python的turtle库使用详解
2019/05/10 Python
Python将string转换到float的实例方法
2019/07/29 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
公司薪酬管理制度
2014/01/31 职场文书
公司营业员的自我评价
2014/03/04 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
2015年中秋寄语
2015/07/31 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
javascript函数式编程基础
2021/09/15 Javascript