checkbox 选中状态与显示状态的研究

Posted 2020-07-26

今天下午做一个小学网站，里面有个自定义选择记住密码

 

 

思路是，隐藏默认的checkbox，自定义了一个元素，通过click改变class来模拟，但是调试的时候发现，当默认checkbox位选中状态的时候，ckecked属性有可能为false，我把事件注释掉，发现没有事件的情况下，点击自定义的单选框，默认的单选框也可以被选中。也就是说，在label标签内不需要添加click事件来帮助改变checkbox的属性，但是奇怪的一幕发生了,

 

当我查看checkbox的选中状态的时候，发现checkbox的checked属性刚好与我想要的相反：

 

难道是bug？

经过十几分钟的研究，终于找到答案，原因在于打印属性的时候，这个console尚在元素的click事件内，我猜测，事件流可能是等我绑定的cilck事件执行完毕后，再去修改checked的属性。为什么这样说？看上面的注释应该可以找到答案，我把console延迟了几百毫秒，这时修改checked的属性的事件已经执行完毕，打印出来的结果也正常了。如图：