¿La selección del botón de radio no se puede deshacer? Mira la radio analógica de selección múltiple

Cómo usar botones de opción múltiple para simular la selección de radio e implementar máscaras personalizadas

1. Vista previa del estado no seleccionado

2. Vista previa del estado seleccionado

código superior

• 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;
    }

• Finalmente, js monitorea el estado seleccionado

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