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中的私有成员
Sep 18 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
vue使用openlayers实现移动点动画
Sep 24 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
西德产收音机
2021/03/01 无线电
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
互动出版网:专业书籍
2017/03/21 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
大学生职业生涯规划方案
2014/01/03 职场文书
幼儿园安全责任书
2014/04/14 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
党员年度个人总结
2015/02/14 职场文书
母亲节感言
2015/08/03 职场文书
七年级作文之游记
2019/12/11 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
bat批处理之字符串操作的实现
2022/03/16 Python