点击后
<ul>
<li>
<input type="checkbox" name="default-address" id="default-address" class="default-address" />
<label for="default-address" ></label>
<span class="checkbox-content">设为默认</span>
</li>
</ul>
css代码
1、先给最外层li设置相对位置
ul li:last-child {
position:relative;
}
2、隐藏input[type=checkbox]的默认样式,并设置绝对位置
ul li input[type='checkbox'] {
visibility:hidden;
position:absolute;
}
3、给label设置背景图片,并根据需要整体缩小图片,设置图片位置
ul li .default-address + label {
background: url('img/default-unselect.png') no-repeat;
zoom:0.7;
padding-top:0.01rem;
padding-left:0.21rem;
}
4、运用jQuery设置点击时,改变文字和背景图片
$("input[type='checkbox']").change(function () {
if ($("input[type='checkbox']").is(':checked')) {
$("input[type='checkbox']:checked + label").css("background","url('../Content/css/img/default-select.png') no-repeat");
$("input[type='checkbox']:checked + label + .checkbox-content").html("默认");
} else {
$("input[type='checkbox'] + label").css("background","url('../Content/css/img/default-unselect.png') no-repeat");
$("input[type='checkbox'] + label + .checkbox-content").html("设为默认");
}
})