input-checkbox选中及非选中样式设置

 

html：

?

1 2 3

<div class="way-choose">     <input id="weuiAgree" type="checkbox" class="agreement-checkbox choose-way" checked> </div>

 

css：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

.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：选中的表达方式：

?

1 2 3 4 5

if($('.agreement-checkbox')[0].checked){     alert("已选中") }else{     alert("未选中") }