html:
<div class="way-choose"> <input id="weuiAgree" type="checkbox" class="agreement-checkbox choose-way" checked> </div>
css:
.way-choose>input[type='checkbox']{ background: none; background: white; -webkit-appearance: none; border: 1px solid gainsboro; outline:0; } .way-choose>input[type='checkbox']:before{ font-family: weui; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; text-align: center; speak: none; display: inline-block; vertical-align: middle; text-decoration: inherit; content: ""; color:white; font-size: 13px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-48%) scale(.73); transform: translate(-50%,-48%) scale(.73); outline:0; } .way-choose>input[type='checkbox']:checked{ background: #D6B887; -webkit-appearance: none; border: none; outline:0; } .way-choose>input[type='checkbox']:checked:before{ font-family: weui; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; text-align: center; speak: none; display: inline-block; vertical-align: middle; text-decoration: inherit; content: "EA08"; color:white; font-size: 13px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-48%) scale(.73); transform: translate(-50%,-48%) scale(.73); border:none; outline:0; }
js:选中的表达方式:
if($('.agreement-checkbox')[0].checked){ alert("已选中") }else{ alert("未选中") }