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

查了好多资料复选框写的磨磨叽叽的一大堆废话！

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

html:


沪深A股

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出常见的十个精美复选框样式：http://blog.csdn.net/chelen_jak/article/details/44827393

那你就完全没有必要用人家的！

得到的样子：

这是一个最简单的例子！

如果你会js/jq，完全可以自己写，写出你想要的东西！

假如你还是不会，那么可以去下载我的例子，已经打包好就等你下载了！

除了这个简单的例子还有一个大的复杂复选框表单，两个例子你可以一起下载。（大的只是js上的逻辑有变化）

简单小例子下载不要积分：

http://download.csdn.net/detail/liujunxin11/9399314

简单的小例子+复杂的大例子=需要3积分：

http://download.csdn.net/detail/liujunxin11/9399307