查了好多资料复选框写的磨磨叽叽的一大堆废话!
我来教大家写一个原生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