查了好多资料复选框写的磨磨叽叽的一大堆废话！
我来教大家写一个原生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"); //添加未勾选选背景图
}
});
});
这是css中需要的两个图片，你可以直接保存。
其实你可以做成任意样式，只要你的ps还看的过去。
假如你能ps出常见的十个精美复选框样式：/chelen_jak/article/details/44827393
那你就完全没有必要用人家的！
得到的样子：
这是一个最简单的例子！
如果你会js/jq，完全可以自己写，写出你想要的东西！
假如你还是不会，那么可以去下载我的例子，已经打包好就等你下载了！
除了这个简单的例子还有一个大的复杂复选框表单，两个例子你可以一起下载。（大的只是js上的逻辑有变化）
简单小例子下载不要积分：
/detail/liujunxin11/9399314
简单的小例子+复杂的大例子=需要3积分：
/detail/liujunxin11/9399307
如果觉得《自定义复选框 复选框样式修改 重写复选框》对你有帮助，请点赞、收藏，并留下你的观点哦！
