background-size: 0.3rem 0.25rem;
}
.icon-checkbox {
width: 0.3rem;
height: 0.3rem;
margin-right: 0.1rem;
border: 0.02rem solid #d7d7d7;
border-radius: 0.06rem;
}
.icon {
display: inline-block;
vertical-align: middle;
}
js
if(!$('#agreeTerm').is(":checked")){
$.alert('请勾选同意《保险条款》和《重要告知与申明》');
return;
};
<div class="allCheck">
<input type="checkbox" id="allCheck" class="check hidden">
<label for="allCheck" class="check-icon">全选</label>
</div>
.allCheck {
padding:0 .1rem 0 .3rem;
}
.check-icon {
display: inline-block;
width:1.5rem;
padding-left:.5rem;
background:url("../../assets/select-no.png")no-repeat left center;
background-size:.42rem .42rem ;
}
.check:checked ~ .check-icon {
background:url("../../assets/selected.png")no-repeat left center;
background-size:.42rem .42rem ;
}
2.模拟单选按钮
类似效果
html代码
<dl id="" class="money">
<dt>选择补偿金额<span class="p_help help">补偿金说明</span></dt>
<dd>
<span>
<input id="money_type_0" name="money_type" class="selection-rd hidden" type="radio" value="1" checked="">
<label class="selection-lb" for="money_type_0">10元</label>
</span>
<span>
<input id="money_type_1" name="money_type" class="selection-rd hidden" type="radio" value="2">
<label class="selection-lb" for="money_type_1">20元</label>
</span>
<span>
<input id="money_type_2" name="money_type" class="selection-rd hidden" type="radio" value="3">
<label class="selection-lb" for="money_type_2">50元</label>
</span>
</dd>
</dl>