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 操作符整理[推荐收藏]
Nov 15 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
js动态引入的四种方法
May 05 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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
SSI指令
2006/11/25 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
jQuery事件用法详解
2016/10/06 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
Python读大数据txt
2016/03/28 Python
python常用知识梳理(必看篇)
2017/03/23 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
学期自我鉴定
2013/11/04 职场文书
大学迎新标语
2014/06/26 职场文书
学前班语言教学计划
2015/01/20 职场文书
公司出差管理制度范本
2015/08/05 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis