单选按钮的选中无法取消？看看多选模拟单选

如何使用多选按钮模拟单选，并实现自定义皮肤

1. 未选中状态预览

2. 选中状态预览

上代码

• HTML：

 <div class="diyCheckbox">
    <label>
          <input type="checkbox" name="box1" id="box1">
          <i></i>
          <span>线上机考</span>
      </label>
  </div>

• CSS

.diyCheckbox{
    
    
    display: flex;
    }
label{
    
    
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        cursor: pointer;
    }
    input[type='checkbox']{
    
    
        display: none;
    }
    i{
    
    
        display: flex;
        justify-content: center;
        align-items: center;
        width: 12px;
        height: 12px;
        background: #fff;
        border: 1px solid #999;
        border-radius: 50%;
        margin-right: 6px;
    }
    input[type='checkbox']:checked + i::before{
    
    
        content: '';
        background: #b4222d;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
    input[type='checkbox']:checked + i{
    
    
        border: 1px solid #b4222d;
    }
    input[type='radio']:checked + i{
    
    
        color: red;
    }

• 最后js监听选中状态

  $("input[name=box1]").change(function () {
    
    
        console.log(this.checked);  //ture 选中
     })