3Z版基于jquery的图片复选框
最近在做一个彩票缩水工具,找了几个图片复选框插件始终感觉不太满意,自己动手山寨了一下imageTick插件.
先上效果图:
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:
1 (function($){
2
3 $.fn.imagecheckbox = function(options) {
4
5 var defaults = {
6 checked: "images/radio.gif",
7 unchecked: "no_images/radio.gif",
8 css: "on",
9 hide_radios_checkboxes: false
10 };
11
12 var opt = $.extend(defaults, options);
13
14 this.each(function(){
15
16 var obj = $(this);
17 var type = obj.attr('type');
18 var id = obj.attr('id');
19
20 if(!opt.hide_radios_checkboxes){
21 obj.css('display','none');
22 }
23
24 if(obj.attr('checked')){
25 $("label[for='" + id + "']").attr('class',opt.css);
26 }else{
27 $("label[for='" + id + "']").attr('class','out');
28 }
29
30 $("label[for='" + id + "']").click(function(){
31 $("#" + id).trigger("click");
32 if($(this).attr('class') == opt.css){
33 $(this).attr('class', 'out');
34 }else {
35 $(this).attr('class', opt.css);
36 }
37 });
38
39 });
40 }
41
42 })(jQuery);
使用方式:(把css一起发出来)
1 <script type="text/javascript" src="/scripts/imagetick.js"></script>
2 <script type="text/javascript">
3 $(function(){
4 $("input[type='checkbox']").imagecheckbox({ // the selector can be a class as well
5 checked: "/images/red.gif",
6 onchecked: "/images/no_check.gif",
7 css: "on"
8 });
9 });
10 </script>
11 <style type="text/css">
12 input{}
13 label{display:inline-block;width:25px;height:22px;padding-top:3px;text-align:center;font:800 12px/150% arial;position:relative;left;-210px;}
14 .on{background:url(/images/red.gif) no-repeat;}
15 .out{background:url(/images/no_check.gif) no-repeat;}
16 </style>
