关于复选框input[type=checkbox]

关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框。

自己在项目中,遇到一个全选/全不选的需求,刚开始关注点没在这里,而是结构搭建完成之后,发现默认的input[type=checkbox]的范围有点小,就想着扩大其点击范围。

项目是使用bootstrap搭建,复选框是在表格的第一格内。

关于复选框input[type=checkbox]

理一下当时的思路:

1、使用label标签,包裹住复选框,由于bootstrap对td和th都使用了padding,所以即使使用label标签,也无法扩大到整个格子内;

2、使用position:relative, z-index,将input的层级放到td的层级后面,事实证明并不能实现想象中的调整层级的效果;

3、直接使用th或者td标签作为点击范围,在td上直接绑定点击事件,利用之前介绍的prop属性,为input[type=checkbox]添加选中和取消的效果。但是这个又产生新的问题了,当点击到内部input标签上面的时候,由于冒泡的存在,会导致两次点击事件,如果阻止input点击事件的默认行为,会导致无法实现选中或者取消状态,如果阻止冒泡,又需要额外在复选框上再实现一次点击事件。

总感觉不是很好,又说不上来哪里问题。

今天上午在看《css揭秘》,其中“扩大可点击区域”中有一句话是“伪元素同样可以代表其宿主元素来响应鼠标交互”(148页),并实现了例子,突然想到其实我这个情况跟他是一样一样的。

于是,对td和th实现伪元素:before进行覆盖,结合2的想法,利用伪元素在定位在td的上层,遮住input。

<td class="js-checkbox"><input type="checkbox"></td>

  html代码如上。

.js-checkbox{
position: relative;
}
.js-checkbox:before{
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.01);
}

  最开始给这个背景色的透明度设为0的,但是偶尔会出现点透的现象,不知道是什么原因,后面就调整了透明度,从视觉上看并没有太大影响,甚至可以将透明度调到更小,这就保证了永远不能点到input元素上,并且整个td的范围都是可点击范围。

  关于全选和全不选的js部分,会在后面整理成插件贴出来。

上一篇:nginx日常运维


下一篇:Java 在本地文件中查找固定字符串