用css html画一个checkbox

//css
.label {
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 0.24rem;
  line-height: 0.24rem;
}

 .label p {
  font-size: 0.12rem;
  margin-left: 0.1rem;
}

 .label .zfx-box {
  width: 0.24rem;
  border: 50%;
  position: relative;
}

 .label .zfx-box .checkbox {
  width: 0.24rem;
  background: #fff;
}

 .label .zfx-box .checkbox:after {
  content: " ";
  display: block;
  padding-top: 0.24rem;
}

 .label .zfx-box .checked {
  background: rgba(175, 143, 80, 0.3);
}

 .label .zfx-box .container {
  left: 0.09rem;
  top: 0.03rem;
  width: 0.08rem;
  height: 0.16rem;
  border-color: #fff;
  border-style: solid;
  border-width: 0 0.03rem 0.02rem 0;
  transform: rotate(45deg);
  position: absolute;
}

//html
<div class="label">
  <div class="zfx-box">
  	<div class="checkbox ">
    	<div class="container" style="display: none;"></div>
  	</div> 
  </div>
  <p>游戏正式上线时将通过一下手机通知你，并在WI-FI环境下帮你下载该游戏</p>
</div>

//jq
var checked=false
    $(".checkbox").on('click',function(){
        checked=!checked
        if(checked){
            $(this).removeClass("checked")
            $(".container").hide()
        }else{
            $(this).addClass("checked")
            $(".container").show()
        }
    })