3Z image based on jquery check box (asp.net+jquery) _jquery

First up Effect chart:

Html:

Copy Code code as follows:

<asp:checkboxlist id= "CheckBoxList1" runat= "server" repeatdirection= "horizontal" Flow "repeatlayout=" 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:

Copy code code as follows:

(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);

How to use: (Send CSS together)

Copy Code code as follows:

<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 OK
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>