最近开发的时候同事遇见了一个问题，点击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 不为人知的小秘密的更多相关文章
	

    
								
  1. label联动checkbox
		
    label联动checkbox时,若label包含在checkbox外层时label不需for属性,设置label的display属性为block时可以使整个div联动.
    
		
    2. 
						
  2. html中的label配合checkbox,redio用法
		
    <input id="a1" type="checkbox" name="a" value="33023" /&g ...
    
		
    3. 
						
  3. Java不为人知的小秘密
		
    Java中的main方法必须有一个外壳类,而且必须是静态的! Java中的所有函数都属于某个类的方法,所以main方法也不例外,必须放在一个类中才能编译运行. 例如: public class tex ...
    
		
    4. 
						
  4. 多个      label  checkbox   组合 显示在同一个水平线上[前提Bootstrap框架]
		
    <th align="left" valign="middle"> <label class="checkbox inline fo ...
    
		
    5. 
						
  5. React中 checkbox 与 label 标签的搭配
		
    用<label>标签替代checkbox的点击样子,点击<label>实际上就是点击checkbox checkbox的checked值会跟着一起变 <input typ ...
    
		
    6. 
						
  6. 巧用CSS3伪类选择器自定义checkbox和radio的样式
		
    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...
    
		
    7. 
						
  7. jquery mobile radio,checkbox button 样式设置
		
    <label><input type=checkbox ></label>,<input type=checkbox id="checkbox &q ...
    
		
    8. 
						
  8. 使用CSS3美化复选框checkbox
		
    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
    
		
    9. 
						
  9. linux下so动态库一些不为人知的秘密
		
    linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识.    基本上每一个linux 程序都至少会有一个动态库,查看某个程序使用了那些 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 基于MATLAB边缘检测算子的实现
			
    基于MATLAB边缘检测算子的实现 作者:lee神 1.   概述 边缘检测是图像处理和计算机视觉中的基本问题,边缘检测的目的是标识数字图像中亮度变化明显的点.图像属性中的显著变化通常反映了属性的重要 ...
    
			
    2. 
						
  2. python中的subprocess.Popen（）使用
			
    python中的subprocess.Popen()使用 从python2.4版本开始,可以用subprocess这个模块来产生子进程,并连接到子进程的标准输入/输出/错误中去,还可以得到子进程的返回 ...
    
			
    3. 
						
  3. Mac环境下实现alias重命名命令(永久生效)
			
    Mac环境下实现alias重命名命令 iOS Dev在使用Xcode完成代码编写后,可能需要上传至第三方分发应用给测试人员进行相关测试,比如蒲公英.FIR. 效率较高的上传方式是借助于Fastlane ...
    
			
    4. 
						
  4. Pycharm配置（一）
			
    Pycharm作为一款强力的Python IDE,在使用过程中感觉一直找不到全面完整的参考手册,因此决定对官网的Pycharm教程进行简要翻译,与大家分享. 1.准备工作 官网下载 2.如何选择Pyc ...
    
			
    5. 
						
  5. 【java】Date与String之间的转换及Calendar类：java.text.SimpleDateFormat、public Date parse(String source) throws ParseException和public final String format(Date date)
			
    package 日期日历类; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util. ...
    
			
    6. 
						
  6. APP Store开发指南
			
    App Store 审核指南 iOS App打包上架超详细流程 ---2017.03 苹果对开发者提交的应用的审核之严格是出了名的,了解苹果的审核标准对于开发者防止应用被拒有着十分重要的意义.几天前苹 ...
    
			
    7. 
						
  7. JNI的使用总结初篇
			
    前言:以下内容是个人在写JNI Demo前后进行查找理解总结得出的一些结论,如有错误的地方希望路过的朋友能够指正. 一.JNI是Java native interface的简称,目前就我所知这类方法的 ...
    
			
    8. 
						
  8. geoserver发布地图服务WMS
			
    wms服务发布: 1.打开geoserver管理首页(网址为http://localhost:8080/geoserver/web/),并使用安装时设置的帐户名和密码登录(这里是admin/geose ...
    
			
    9. 
						
  9. css em单位
			
    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/41 为什么要有em 为了弹性布局.更准确的说是界面元素根据浏览器 ...
    
			
    10. 
						
  10. (一)基于阿里云的MQTT远程控制(Android 连接MQTT服务器,ESP8266连接MQTT服务器实现远程通信控制----简单的连接通信)
			
    如果不了解MQTT的可以看这篇文章  http://www.cnblogs.com/yangfengwu/p/7764667.html http://www.cnblogs.com/yangfengw ...
    
			
    11.