3Z版基于框架的图片复选框(ASP NET jquery)

先上效果图：

html:复制代码代码如下： asp:复选框列表ID='复选框列表1 ' runat='服务器'重复方向='水平'重复布局='流动'宽度=' 280 px ' asp3360列表项01/asp:列表项02/asp:列表项asp:列表项03/asp3:列表项04/asp:复制代码代码如下：(函数($){ $)。fn。imagecheckbox=函数(选项){ var defaults={ checked : ' images/radio。gif '，未选中： ' no _ images/radio。gif '、css: 'on '、hide _ radio _ checkbox : false }；var opt=$ .扩展（默认值、选项);这个。每个(function(){ var obj=$(this)；var type=obj。attr(' type ')；var id=obj。attr(' id ')；if(！选择。hide _ radio _ checkbox){ obj。CSS('显示'，'无')；} if(obj。attr(' checked '){ $(' label[for=' id ' ']').attr('class '，opt。CSS)；} else { $(' label[for=' id ' ']').attr('class '，' out ')；} $(' label[for=' id ' ']').单击(function(){ $(“#”id)).触发器(“点击”)；if($(this).attr('class')==opt.css){ $(this).attr('class '，' out ')；}else { $(this).attr('class '，opt。CSS)；} });});} })(jQuery)；使用方式：(把钢性铸铁一起发出来)复制代码代码如下：脚本类型=' text/JAVAScript ' src=' http :/scripts/image tick。js /脚本脚本类型=' text/JavaScript ' $(function(){ $(' input[type=' checkbox ']').imagecheckbox({ //选择器也可以是checked: '/images/red.gif '，on checked : '/images/no _ check。gif '，CSS : ' on ' })；});/script style type=' text/CSS ' input { } label { display : inline-block；宽度：25 pxheight :22 xpadding-top :3 px；文本对齐：居中；font :800 12px/150% arial；位置：相对；向左；-210像素；} .在{背景： URL(/images/red。gif)上，不重复；} .out { background : URL(/images/no _ check。gif)不重复；}/样式