在开发中，表单中经常会用到复选框，但是HTML原生自带的复选框样式真是太丑陋了，往往是无法满足需求的，因此需要通过HTML、CSS、JS来模拟复选框的效果，来实现需求样式。
- 结构
<span class="base" id="target"></span>
- 样式
.base{
position: relative;
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid blue;
}
// 设置动态添加的checked类样式
.checked::after{
content: '';
width: 8px;
height: 4px;
border-left: 1px solid blue;
border-bottom: 1px solid blue;
position: absolute;
top: 2px;
left: 1px;
transform: rotate(-45deg)
}
- 逻辑
var target = document.getElementById('target')
target.onclick = function () {
this.classList.contains('checked') ? this.classList.remove('checked') : this.classList.add('checked')
}
