HTML复选框checkbox美化
文章描述：
使用label结合checkbox，背景图片以及选中进行美化。
html
使用label标签来代替checkbox复选框的背景
<div class="like container">
<div class="checked-ui">
<input class="checked" name="hobby" type="checkbox" checked="checked" value="学习">
<label class="label active"></label>
<span class="ui-tit">学习</span>
</div>
<div class="checked-ui">
<input class="checked" name="hobby" type="checkbox" value="游戏">
<label class="label"></label>
<span class="ui-tit">游戏</span>
</div>
<div class="checked-ui">
<input class="checked" name="hobby" type="checkbox" value="爬山">
<label class="label"></label>
<span class="ui-tit">爬山</span>
</div>
<div class="checked-ui">
<input class="checked" name="hobby" type="checkbox" value="游泳">
<label class="label"></label>
<span class="ui-tit">游泳</span>
</div>
</div>css
使用css隐藏checkbox，使用label来代替复选框
.checked-ui{display: inline-block; position:relative; margin-right:10px;}
.checked{ display:none;}
.ui-tit{ padding-left:20px;}
.label { display: inline-block; width: 14px; height: 14px; background: url(images/sprite2.png) -84px -102px; cursor: pointer; vertical-align: middle; position:absolute; top:5px; left:0;}
.label.active { background: url(images/sprite2.png) -70px -102px;}script
当点击复选框是判断状态以及操作对应隐藏的复选框状态
$(".like .checked-ui").on('click',
function() {
var txt = $(this).find('.ui-tit').text();
if ($(this).find('.label').hasClass('active')) {
$(this).find('.label').removeClass('active');
var isCheck = $(this).find('.checked').is(':checked');
if (isCheck) {
$(this).find('.checked').prop({
"checked": false,
});
}
} else {
$(this).find('.label').addClass('active');
var isCheck = $(this).find('.checked').is(':checked');
if (isCheck) {} else {
$(this).find('.checked').prop({
"checked": true,
});
}
}
});发布时间：2021/08/16
发表评论