3Z版基于jquery的图片复选框(asp.net+jquery)


Posted in Javascript onApril 12, 2010

先上效果图:
3Z版基于jquery的图片复选框(asp.net+jquery)

html:

<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" Width="280px"> 
<asp:ListItem>01</asp:ListItem> 
<asp:ListItem>02</asp:ListItem> 
<asp:ListItem>03</asp:ListItem> 
<asp:ListItem>04</asp:ListItem> 
<asp:ListItem>05</asp:ListItem> 
<asp:ListItem>06</asp:ListItem> 
<asp:ListItem>07</asp:ListItem> 
<asp:ListItem>08</asp:ListItem> 
<asp:ListItem>09</asp:ListItem> 
<asp:ListItem>10</asp:ListItem> 
<asp:ListItem>11</asp:ListItem> 
<asp:ListItem>12</asp:ListItem> 
<asp:ListItem>13</asp:ListItem> 
<asp:ListItem>14</asp:ListItem> 
<asp:ListItem>15</asp:ListItem> 
<asp:ListItem>16</asp:ListItem> 
<asp:ListItem>17</asp:ListItem> 
<asp:ListItem>18</asp:ListItem> 
<asp:ListItem>19</asp:ListItem> 
<asp:ListItem>20</asp:ListItem> 
<asp:ListItem>21</asp:ListItem> 
<asp:ListItem>22</asp:ListItem> 
<asp:ListItem>23</asp:ListItem> 
<asp:ListItem>24</asp:ListItem> 
<asp:ListItem>25</asp:ListItem> 
<asp:ListItem>26</asp:ListItem> 
<asp:ListItem>27</asp:ListItem> 
<asp:ListItem>28</asp:ListItem> 
<asp:ListItem>29</asp:ListItem> 
<asp:ListItem>30</asp:ListItem> 
<asp:ListItem>31</asp:ListItem> 
<asp:ListItem>32</asp:ListItem> 
<asp:ListItem>33</asp:ListItem> 
</asp:CheckBoxList>

JS:
(function($){ 
$.fn.imagecheckbox = function(options) { 
var defaults = { 
checked: "images/radio.gif", 
unchecked: "no_images/radio.gif", 
css: "on", 
hide_radios_checkboxes: false 
}; 
var opt = $.extend(defaults, options); 
this.each(function(){ 
var obj = $(this); 
var type = obj.attr('type'); 
var id = obj.attr('id'); 
if(!opt.hide_radios_checkboxes){ 
obj.css('display','none'); 
} 
if(obj.attr('checked')){ 
$("label[for='" + id + "']").attr('class',opt.css); 
}else{ 
$("label[for='" + id + "']").attr('class','out'); 
} 
$("label[for='" + id + "']").click(function(){ 
$("#" + id).trigger("click"); 
if($(this).attr('class') == opt.css){ 
$(this).attr('class', 'out'); 
}else { 
$(this).attr('class', opt.css); 
} 
}); 
}); 
} 
})(jQuery);

使用方式:(把css一起发出来)
<script type="text/javascript" src="/scripts/imagetick.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("input[type='checkbox']").imagecheckbox({ // the selector can be a class as well 
checked: "/images/red.gif", 
onchecked: "/images/no_check.gif", 
css: "on" 
}); 
}); 
</script> 
<style type="text/css"> 
input{} 
label{display:inline-block;width:25px;height:22px;padding-top:3px;text-align:center;font:800 12px/150% arial;position:relative;left;-210px;} 
.on{background:url(/images/red.gif) no-repeat;} 
.out{background:url(/images/no_check.gif) no-repeat;} 
</style>
Javascript 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
layui select动态添加option的实例
Mar 07 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 #Javascript
javascript cookies操作集合
Apr 12 #Javascript
javascript 数组学习资料收集
Apr 11 #Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 #Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 #Javascript
javascript dom 基本操作小结
Apr 11 #Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 #Javascript
You might like
php文件上传类完整实例
2016/05/14 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
深入理解Python中装饰器的用法
2016/06/28 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
信电学院毕业生自荐书
2014/05/24 职场文书
倡导文明标语
2014/06/16 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
紧急迫降观后感
2015/06/15 职场文书
总结会主持词
2015/07/02 职场文书
环保主题班会教案
2015/08/13 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL