<style>
input[type=checkbox] + .lbl::before{
content:"N";
border:1px solid red;
}
input[type=checkbox]:checked + .lbl::before{
content:"Y";
border:1px solid red;
}
input[type=checkbox]{
/*display:none;不占口空间，无法点击*/
/*visibility:none;占空间，但点击无效*/
opacity: 0;
position: absolute;/*脱离文档流 使checkbox 和要点击的位置一致 */;
}
</style>
<table border="1">
<tr onclick="console.log('tr click');">
<td>
<span onclick="console.log('lbl click')">
使用span包裹 事件冒泡 checkbox click(点中的是checkbox就有这个事件点中的是label就没) > lbl click >tr click <input type="checkbox" onclick="console.log('checkbox click')"/>
<span class="lbl" onclick="console.log('span click')"></span>
</span>
</td>
</tr>
<tr onclick="console.log('tr click');">
<td>
<label onclick="console.log('lbl click')">
使用label包裹 事件冒泡 点中的是checkbox就正常往上冒泡:checkbox click> lbl click >tr click ,点的是label:除了正常的 lbl click>tr click ,还会 lbl click> label里的第一个input click >lbl click >tr click <font color=red>所以tr被点击了两次</font><input type="checkbox" onclick="console.log('checkbox click')"/>
<span class="lbl" onclick="console.log('span click')"></span>
</label>
</td>
</tr>
</table>
当时 是做一个，点击了<tr> 加上一个选中的背景色的功能，点了两次就 导致加上了又取消， 浪费了很多事件，终于搞明白了!!!!
1.阻止冒泡:
在checkbox 上加 onclick="event.stopPropagation();"
2.tr click 中 判断 event.target ( 事件来源 )
