基于jquery扩展漂亮的CheckBox(自己编写)

大家都知道默认的超文本标记语言复选框控件样式可定义相当有限，无法满足大多用户的美观度。今天跟大家一起分享前一段时间自己编写的检验盒控件。喜欢的朋友可以拿去使用，有什么好的建议希望你给我留言。废话不多说，切入正题Html。部分代码如下：复制代码代码如下： b类='combox' Css部分代码如下：复制代码代码如下：combox { float : leftbackground : URL(/img/Icon _ BG。巴布亚新几内亚)；} .combox { width :16 pxh three :16 px背景-位置：-21px-40px；光标：指针指针；font-size :9 px} .组合盒。已检查{背景-位置：-37px-40px；} Js部分代码如下： 1、自定复选框类复制代码代码如下： //复选框var CheckBox=function(){ this。objvar _this=this，_ obj//初始化这个。init=function(){ _ obj=_ this。objvar tem=_obj.length 1？_ obj。eq(0): _ obj；if(tem。长度==1个tem。attr(' class ').indexOf(' combox ')==-1){显示消息('控件属性设置有误：部分控件并不是复选框!');返回；} //对象单击事件var click _ fun=fun(obj){ if(obj。attr(' class ').indexOf(' checked ')-1){ obj。移除类('选中')；_这个。单击_ cancel()；} else { obj。addCLaSS('选中')；_这个。click _回调()；} } //设置有文字复选框if (_obj.attr('_txt ')！=undefined) { _obj.each(函数(I){ var CB=_ obj。情商(一)；CB。wrap pall(' font class=' CB _ txt '/font ')；//文本单击事件cb.parent().追加(cb.attr('_txt ').click(function(){ click _ fun(CB))；});});} else//对象点击事件_obj.unbind(单击).click(function(){ click _ fun($(this))；});} //点击回调事件点击此处回调=function () { } //取消选择事件这个。单击_取消=函数(){ } } 2、调用如下：复制代码代码如下： var CheckBox=new CheckBox()；checkbox.obj=$(' .内容ul li .combox’)；//点击回调事件根据自己的需求去调整，默认没有相应操作事件，可以不用赋值复选框。click _ callback=fun(){ fun _ set pay()；} //取消选择事件复选框。click _ cancel=fun(){ fun _ set pay()；}复选框。init()；使用的图片

示例展示图