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 相关文章推荐
JQuery 网站换肤功能实现代码
Nov 02 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
常用的javascript设计模式
2017/01/11 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Pytorch之parameters的使用
2019/12/31 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
基本款天堂:Everlane
2017/05/13 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
体育教师求职信
2014/05/24 职场文书
抵押贷款承诺书
2014/05/30 职场文书
会计系毕业求职信
2014/08/07 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
优秀教师单行材料
2014/12/16 职场文书
股份转让协议书范本
2015/01/27 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
上甘岭观后感
2015/06/10 职场文书
hive数据仓库新增字段方法
2022/06/25 数据库