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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
node+vue实现文件上传功能
May 28 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
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 地址栏信息的获取代码
2009/01/07 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
javascript英文日期(有时间)选择器
2007/05/02 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
webpack之devtool详解
2018/02/10 Javascript
Python匹配中文的正则表达式
2016/05/11 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
django认证系统 Authentication使用详解
2019/07/22 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
计算机专业毕业生的自我评价
2013/11/18 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
班主任先进事迹材料
2014/12/17 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
新学期感想
2015/08/10 职场文书
小学记事作文之200字
2019/08/06 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android