Label 和 checkbox 不为人知的小秘密
最近开发的时候同事遇见了一个问题,点击label的时候改变checkbox的属性,或许大家觉得这是一个很简单的问题,然而这里面却蕴藏着一个大坑!
举例说明:
页面简单,就是一个
<input id="input" type="checkbox">
和一个
<label id="label" for="t">点我</label>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input id="input" type="checkbox"> <label id="label" for="input">点我</label>
</div>
</body>
操作的思路大致是点击给label添加一个事件,通过判断checkbox当前的状况来改变checkbox的状态,代码如下:
<script>
var inputELe = document.getElementById('input'); //input元素
var labelEle = document.getElementById('label'); //label元素
labelEle.addEventListener('click',function(e){ //给label添加事件
alert('我被点了');
if(inputELe.checked){ //如果当前是选中状态
inputELe.checked = false //置为false
}else{
inputELe.checked = true //否则置为true
}
});
</script>
乍一看代码很完美,完全能够满足要求,但是实际上呢?看gif图:
可以看到,无论我怎么点击,checkbox都没有变成选中状态。这是一个很奇怪的现象。要解释这个现象要知道label和这个input之间的通信问题。
点击label触发checkbox状态改变和直接点击checkbox触发改变的过程是不一样的,
直接点击checkbox会立即改变checkbox的状态,如下:
假如现在代码如下:
inputELe.addEventListener('click',function(e){ //只给input元素添加事件
alert(inputELe.checked);
});
可以看到,当input的状态在视图上还没改变的时候,他的checked的值已经发生了改变了,而如果在label上加事件呢?
labelEle.addEventListener('click',function(e){
alert(inputELe.checked);
});
这样则在点击label的时候,并没有立刻改变checkedbox的状态,而是当注册在label上的事件alert完了之后,才改变的checkbox的状态。造成这种现象的原因在于:
点击label的时候,label有限处理自己对应的事件,然后再通知checkbox改变状态,而且,只会通知checkbox改变状态,并不告诉他要改变成true还是false,checkbox当前是true就变成false,是false就改成true.
这样便可以理解一开始的程序为什么没有改变成功状态了。
再把代码拷过来,一步一步看,假设一开始checkbox没有选中:
labelEle.addEventListener('click',function(e){ //给label添加事件
alert('我被点了');
if(inputELe.checked){ //由于点击label的时候,还没有告诉checkbo改变状态,所以当前值是false,执行else语句
inputELe.checked = false //置为false
}else{
inputELe.checked = true //所以这个时候checkbox应该变成了true,状态改变成功!
}
});
上面的方法确实改变了checkbox的状态但是,执行完这个方法后,label还有事要做,那就是通知checkbox改变状态,由于这时候执行的方法里面已经把checkbox的状态改成了true,所以当checkbox接到label的消息的时候,又会把自己变成false,
所以改变状态并没有成功,一来一回又被变成了原样了。checkbox一开始为false的时候也一样。 所以当大家使用label和checkbox(radio也一样)组合的时候,一定注意:不要把事件加给label,却在点击时间里去改变checkbox的状态!正确的做法是始终给checkbox添加事件并且改变checkbox的状态。
最后,告诉大家这个组合的使用场景:
就是组合成一个这样的开关,通过隐藏input并给label添加样式:after 和 :before 伪元素即可,当然注意操作的时候不要陷入上面的坑里面。
Label 和 checkbox 不为人知的小秘密的更多相关文章
- label联动checkbox
label联动checkbox时,若label包含在checkbox外层时label不需for属性,设置label的display属性为block时可以使整个div联动.
- html中的label配合checkbox,redio用法
<input id="a1" type="checkbox" name="a" value="33023" /&g ...
- Java不为人知的小秘密
Java中的main方法必须有一个外壳类,而且必须是静态的! Java中的所有函数都属于某个类的方法,所以main方法也不例外,必须放在一个类中才能编译运行. 例如: public class tex ...
- 多个 label checkbox 组合 显示在同一个水平线上[前提Bootstrap框架]
<th align="left" valign="middle"> <label class="checkbox inline fo ...
- React中 checkbox 与 label 标签的搭配
用<label>标签替代checkbox的点击样子,点击<label>实际上就是点击checkbox checkbox的checked值会跟着一起变 <input typ ...
- 巧用CSS3伪类选择器自定义checkbox和radio的样式
由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...
- jquery mobile radio,checkbox button 样式设置
<label><input type=checkbox ></label>,<input type=checkbox id="checkbox &q ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
- linux下so动态库一些不为人知的秘密
linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识. 基本上每一个linux 程序都至少会有一个动态库,查看某个程序使用了那些 ...
随机推荐
- 经常使用的C#代码(每日更新)
欢迎使用该软件,软件中包括了经常使用的代码.而且每日更新. 该软件还在开发中,O(∩_∩)O~ 目的: 1.提高工作效率 2.格式化代码,方便阅读 3.必备工具 4.偷懒专用 watermark/2/ ...
- Python笔记·第三章—— 逻辑运算
一.逻辑运算符的种类及优先级 ▷逻辑运算符包括 not and or ▷他们的优先级是 () > not > and > or 二.普通逻辑运算 ▷A and B ---> ...
- vue路由
vue-router 现在的应用都流行SPA应用(single page application) 传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候受网络 ...
- ssm学习(五)--加入分页插件
之前我们的查询列表是将所有的数据查询出来,并没有做分页,当数据很少的时候,是不需要分页,但是如果数据很多的时候,所有数据显示在一个页面显然是不合适的. 之前用hibernate的时候,可以直接通过查询 ...
- 运算符关键字。数据区别大小写。日期范围。判空的两种写法。NOT IN的两种写法。IN范围可含NULL,但NOT IN值范围不能含NULL。
比较:>,<,=,>=,<=,<>(!=) 逻辑:AND,OR,NOT 范围:BETWEEN...AND... 范围:IN,NOT IN 判空:IS NULL, I ...
- DataBase MongoDB集群方案介绍
MongoDB集群方案介绍 一.什么是mongodb集群? 是指由多台mongodb服务器组成的服务器集群,称之为mongodb集群. 二.mongodb集群搭建的方式: 1.Replica Set ...
- sourceTree每次拉取代码和提交代码都需要输入密码
今天新安装的sourceTree导入项目,拉取代码的时候一直提示让我输入git密码,每次拉取和提交的时候都需要重新输入密码,甚是麻烦,在网上,搜索,解决办法五花八门,这里提供一种简单有效的方法供大家参 ...
- JavaWeb框架_Struts2_(五)----->Struts2的标签库
1. Struts2的标签库 1.1 Struts2标签库概述 Struts2的标签库可以分为以下3类:用户界面标签.非用户界面标签.AJAX标签; 2.1.1 Struts2标签库的分类和使用 1 ...
- PHP中public,private,protected,abstract等关键字用法详解
PHP中常用的关键字 在PHP中包含了很多对函数和类进行限制的关键字,常用的通常有abstract,final,interface,public,protected,private,static等等, ...
- Who's in the Middle
FJ is surveying his herd to find the most average cow. He wants to know how much milk this 'median' ...