在开发中，表单中经常会用到复选框，但是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')
}