复选框样式自定义
Posted 前端小记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了复选框样式自定义相关的知识，希望对你有一定的参考价值。
一、html部分
<label class="check_list i_check">
<input name="checkbox" type="checkbox" class="checkbox">
</label>
二、CSS部分
.check_list{
float: left;
}
.checkbox{
opacity: 0;
filter:alpha(opacity=0);
cursor: pointer;
}
.i_check{
background: url(imgs/复选框1.png) no-repeat;
}
.i_check:hover{
background: url(imgs/复选框hover.png) no-repeat;
}
.i_checked{
background: url(imgs/复选框-选中.png) no-repeat;
}
三、jq部分
$(".checkbox").click(function (){
//判断复选框勾选状态
if ($(this).is(‘:checked‘)) {
$(this).parent().removeClass("i_check").addClass("i_checked"); //删除未勾选选背景
}else{
$(this).parent().removeClass("i_checked").addClass("i_check");
}
});
以上是关于复选框样式自定义的主要内容，如果未能解决你的问题，请参考以下文章