首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
html
icons
css
vue.js
上传
webkit
chart
hybrid
svg
layout
iframe
dialog
html5
firebug
chart.js
charts
npm
javascript
jq
checkbox
vue
focus
button
react
label
postman
js
正则
chrome
overflow
jquery
ajax
listview
node.js
base64
dom
build
微信开发
requirejs
scroll
textview
view
v8
bootstrap
css3
console
cookies
hover
scheme
firefox
yarn
当前位置:
开发笔记
>
前端
> 正文
HTML复选框和单选框checkbox和radio事件介绍_基础知识
作者:左伊 | 来源:互联网 | 2018-06-19 10:04
checkbox和radio的事件选择一度让我很迷惑,开始以我对js的理解,我觉得change事件应该是最合理的,可惜啊ie下change事件是在改变后焦点离开时才触发
checkbox 和 radio的事件选择一度让我很迷惑。
开始以我对js的理解,我觉得change事件应该是最合理的,可惜啊ie下change事件是在改变后焦点离开时才触发。
后来就用click mousedown等鼠标事件代替。发现click比mousedown要更完美一些:
radio注册了click事件以后,神奇的是用键盘上的上下左右选择时,居然会触发鼠标事件,滚轮也会触发,这种神奇的事情在mousedown下面是不会发生的。(webkit不能使用上下左右选择)
checkbox注册click事件后,奇迹再次上演,当我们用空格选中checkbox时,神奇的click事件再次触发,而mousedown再次与奇迹擦身而过。(webkit还是不能用空格选择)
让我们都用click吧,给这两位老兄减负吧,不要为了他们先天不足给他们绑定一堆事件了,对于这两个家伙click才是万能的。膜拜一下~~~
在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在HTML的
标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚至全选。请看下面的例子:
下面给出这个例子的源代码,结合代码来讲各参数的设置: 你是否喜欢旅游?请选择:
代码如下:
喜欢
不喜欢
无所谓
您对那些运动感兴趣,请选择:
代码如下:
跑步
打球
登山
健美
从上面的源代码中可看出,制作单选框只要把
标记的type参数设置为type="radio"就行了;而制作复选框则只要把
标记的type参数设置为type="checkbox"就行了。至于实际应用中用那种选择框,要根据实际需要而定。若只需用户有一种选择的,就用单选框,如本例中“你是否喜欢旅游?”这个问题,用户只能是一种选择,所以采用了单选框;若允许用户有多项选择的内容,则采用复选框,如本例中的“你对那些运动感兴趣?”这个问题,因一个人的兴趣可能是多方面的,所以采用了复选框。
在
标记中设定checked参数,则该选框就被默认选中。如本例的第一个单选框(“喜欢”下面那个单选框)就设置为默认选中,这样用户若是想选择“喜欢”的话,就可以不用再选了,当然,若用户要选择了“不喜欢”,则只要点击“不喜欢”下的那单选框,而默认值被自动取消。用同样的方法也可以设置某个复选框为默认被选中。但是复选框的默认选中不可滥用,否则会引起用户的反感。
在radio里面千万要注意记得把所有的
这个对象的name属性都设为相同的,比如说上例的 name="radiobutton" ,记住不是ID属性,只有这样才能实现单选的效果,不然的话上面例子的‘喜欢'、‘不喜欢'、‘无所谓'就可以同时选上了,切记!
webkit
html
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
overflow
mintui中的下拉加载,可以一直加载数据,怎么处理呢?
html结构 ...
[详细]
蜡笔小新 2023-10-17 10:44:03
正则
Python爬取豆瓣数据实现过程解析
这篇文章主要介绍了Python爬取豆瓣数据实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值, ...
[详细]
蜡笔小新 2023-10-16 12:46:01
webkit
为什么三角形与菜单背景的颜色不同? - Why is the triangle a different colour shade to the menu background?
Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ...
[详细]
蜡笔小新 2023-10-16 11:26:13
chrome
Python爬虫_HTTP标准
文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议(超文本传输协议)是用于从WWW服务 ...
[详细]
蜡笔小新 2023-10-15 14:59:43
chrome
Python-图片和视频文件爬虫
最近在学Python,看了不少资料、视频,对爬虫比较感兴趣,爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ...
[详细]
蜡笔小新 2023-10-15 09:28:43
chrome
Scrapy 爬取图片
1.创建Scrapy项目scrapystartprojectCrawlMeiziTuscrapygenspiderMeiziTuSpiderhttps:movie.douban.c ...
[详细]
蜡笔小新 2023-10-14 15:02:27
chrome
爬虫05 /scrapy框架
目录爬虫06scrapy框架1.scrapy概述安装2.基本使用3.全栈数据的爬取4.五大核心组件对象5.适当提升scrapy爬取数据的效率6.请求传参爬虫06scrapy框架1. ...
[详细]
蜡笔小新 2023-10-13 22:01:54
chrome
python爬虫如何使用代理ip,Python ip代理
博主使用代理IP来自于网上免费提供高匿IP的这个网站用到的库frombs4importBeautifulSoupimportrandomimporturllib.re ...
[详细]
蜡笔小新 2023-10-13 18:52:58
chrome
开发笔记:正则表达式python
篇首语:本文由编程笔记#小编为大家整理,主要介绍了正则表达式python相关的知识,希望对你有一定的参考价值。 ...
[详细]
蜡笔小新 2023-10-13 18:34:35
overflow
为什么borderimage在CSS中很少被使用,你可能不知道的小知识
之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。看起来这是一个非常 ...
[详细]
蜡笔小新 2023-10-13 16:23:53
js
Material Design Lite ,简洁惊艳的前端工具箱。
2019独角兽企业重金招聘Python工程师标准MaterialDesignLite简介本文主要介绍MaterialDesign设计语言的HTMLCSSJS部分实现。对应每一 ...
[详细]
蜡笔小新 2023-10-13 13:44:20
chrome
nginx 解决跨域问题 No: 'AccessControlAllowOrigin' header is present on the requested resource
错误信息:1, ...
[详细]
蜡笔小新 2023-10-13 12:38:39
chrome
发现一个好看的手机壁纸网站,撸代码的手已经饥渴难耐了
本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。最近有同学的爬虫代码出了bug,给问我怎么改于 ...
[详细]
蜡笔小新 2023-10-13 11:57:49
chrome
whitepages 爬取_爬取新笔趣阁小说!适合新手入门的小案例
爬取笔趣阁小说(搜索爬取)首先看看最终效果(gif):实现步骤:1.探查网站“http:www.xbiquge.la”,看看网站的实现原理 ...
[详细]
蜡笔小新 2023-10-13 11:41:31
overflow
CSS3选择器的使用方法详解,提高Web开发效率和精准度
本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
左伊
这个家伙很懒,什么也没留下!
Tags | 热门标签
html
icons
css
vue.js
上传
webkit
chart
hybrid
svg
layout
iframe
dialog
html5
firebug
chart.js
charts
npm
javascript
jq
checkbox
vue
focus
button
react
label
postman
js
正则
chrome
overflow
RankList | 热门文章
1
Ajax Loaded内容的JQuery Event绑定 - JQuery Event binding of Ajax Loaded content
2
jsoncpp写文件中文乱码问题解决
3
华科计算机博导刘云生论文,关于对博士学位论文进行盲审的通知
4
彻底理解python递归_Python开发之Python递归图示理解
5
java 怎么把list 中string转换成integer_不了解这 12 个语法糖,别说你会 Java!
6
高通驱动9008安装_赛多利斯Sartoriusambr? 250 高通量灌注培养系统
7
js如何根据数组某个值进行排序?
8
现在怎么这么多外包公司。。。
9
JUC集合类 SynchronousQueue源码解析 JDK8
10
表单中readonly和disabled的区别?
11
关于minergate的使用图解,你仅需要知道这些就能挖矿了
12
《蹲坑学kubernetes》之82:Etcd选主原理详解
13
怎么从某个div跳转到另一个_《另一个伊甸超越时空的猫》水晶杖ll怎么样 属性及效果一览_另一个伊甸...
14
TypeError: 'dict_keys' object does not support indexing
15
KubernetesapiVersion:networking.k8s.io/v1问题与“入口”
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有