關於復選框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部分，會在后面整理成插件貼出來。