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 相关文章推荐
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
JS实现网页烟花动画效果
Mar 10 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函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
浅谈Python的异常处理
2016/06/19 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
水污染治理专业毕业生推荐信
2013/11/14 职场文书
关于旷工的检讨书
2014/02/02 职场文书
梅花魂教学反思
2014/04/25 职场文书
销售个人求职信范文
2014/04/28 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
新党员入党决心书
2015/09/22 职场文书