关于复选框input[type=checkbox]

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

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

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

理一下当时的思路：

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部分，会在后面整理成插件贴出来。