自定义复选框,复选框样式修改,重写复选框

最新推荐文章于 2025-06-22 16:19:45 发布

原创最新推荐文章于 2025-06-22 16:19:45 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

这篇教程介绍了如何使用jQuery和CSS实现自定义复选框的样式。通过修改CSS背景图片并监听复选框点击事件，实现了复选框选中和未选中时背景的变化。提供了简单的代码示例和下载资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我来教大家写一个原生jq的复选框样式,简单实用,又不会耽误checkbox的调用。

html:
<label class="checklist iCheck">
<input class="checkbox" type="checkbox"/>
<span>沪深A股</span>
</label>

css:

/* 复选框自定义样式 Start */
/* label 图片浮动，一般不浮动会显示不全 */
.checklist{float:left;}
/* checkbox 原复选框隐藏 */
.checkbox{opacity:0;filter:alpha(opacity=0);}
/* label 的背景图片 iCheck未选中 iCheck-ed选中 */
.iCheck{background:url(../img/chk_bg1.png) no-repeat;}
.iCheck-ed{background:url(../img/chk_bg2.png) no-repeat;}
/* 复选框自定义样式 End */

js/jq:

$(document).ready(function () {
//判断当前复选框状态，并让label背景图与复选框同步勾选或取消
$(".checkbox").click(function (){
//判断复选框勾选状态
if ($(this).is(':checked')) {
$("label").removeClass("iCheck"); //删除未勾选选背景图
$("label").addClass("iCheck-ed"); //添加勾选态背景图
}else{
$("label").removeClass("iCheck-ed"); //删除勾选选背景图
$("label").addClass("iCheck"); //添加未勾选选背景图
}
});
});