期望效果：
checkbox.jpg
示例代码：
引入JQuery和font-awesome图标
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
CSS
.checkbox-style{
display: inline-block;
vertical-align: middle;
text-align: center;
width: 17px;
height: 17px;
line-height: 17px;
box-sizing: border-box;
border: 1px solid #a0a0a0;
}
.hide{
display: none;
}
.show{
display: inline-block;
}
HTML:
<div class="checkbox">
<label class="label-checkbox " style="display: block;margin-bottom: 3%;">
<input type="checkbox" class="checkbox hide" name="card">
<span class="checkbox-style"><i class="fa fa-check hide jifen-check" aria-hidden="true"></i></span>
<span>会员卡号</span>
</label>
</div>
JS:
<script>
// 初始化默认被选中的
if($(".label-checkbox input[type='checkbox']").is(':checked')){
var a = $(".label-checkbox input[type='checkbox'][checked]");
$(a).next().children(".jifen-check").addClass("show").removeClass("hide");
}
$(".label-checkbox input[type='checkbox']").change(function() {
if($(this).is(':checked')){
$(this).next().children(".jifen-check").addClass("show").removeClass("hide");
}else{
$(this).next().children(".jifen-check").addClass("hide").removeClass("show");
}
});
</script>
