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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
自己写的兼容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
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php检测文本的编码
2015/07/26 PHP
php探针不显示内存解决方法
2019/09/17 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
javascript的事件描述
2006/09/08 Javascript
JavaScript中的其他对象
2008/01/16 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
详解Node中导入模块require和import的区别
2017/08/11 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
Python变量和字符串详解
2017/04/29 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
Java工程师面试集锦之Spring框架
2013/06/16 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
经济纠纷起诉状
2015/05/20 职场文书
医德医风学习心得体会
2016/01/25 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js