3Z版基于jquery的圖片復(fù)選框(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一起發(fā)出來)
<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>
相關(guān)文章
JQuery的Validation插件中Remote驗(yàn)證的中文問題
前段時(shí)間,再次出現(xiàn)AJAX中文編碼問題,導(dǎo)致會(huì)員名重復(fù)檢測失敗,不過這次出現(xiàn)問題的是Validation插件的remote驗(yàn)證。2010-07-07jQuery實(shí)現(xiàn)鼠標(biāo)移到元素上動(dòng)態(tài)提示消息框效果
當(dāng)光標(biāo)移動(dòng)到某些元素上時(shí),會(huì)彈出像tips的提示框,這種效果想必大家都有見到過吧,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-10-10jQuery實(shí)現(xiàn)仿Google首頁拖動(dòng)效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿Google首頁拖動(dòng)效果的方法,涉及jQuery操作鼠標(biāo)事件及div層的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05jQuery簡單實(shí)現(xiàn)驗(yàn)證郵箱格式
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)驗(yàn)證郵箱格式的相關(guān)資料,需要的朋友可以參考下2015-07-07javascript jQuery $.post $.ajax用法
這是一個(gè)簡單的 POST 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù),請(qǐng)使用 $.ajax。2008-07-07jquery處理json數(shù)據(jù)實(shí)例分析
json數(shù)據(jù)是一種經(jīng)型的實(shí)時(shí)數(shù)據(jù)交互的數(shù)據(jù)存儲(chǔ)方法,使用到最多的應(yīng)該是ajax與json配合使用了,下面我來給大家介紹jquery處理json數(shù)據(jù)方法。2014-06-06jQuery阻止移動(dòng)端遮罩層后頁面滾動(dòng)
本文主要介紹了jQuery阻止移動(dòng)端遮罩層后頁面滾動(dòng)的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03使用jquery.form.js實(shí)現(xiàn)圖片上傳的方法
這篇文章主要介紹了使用jquery.form.js實(shí)現(xiàn)圖片上傳的方法,涉及jquery使用表單插件jquery.form.js進(jìn)行圖片上傳的提交、類型驗(yàn)證、執(zhí)行結(jié)果回調(diào)顯示等技巧,非常簡單實(shí)用,需要的朋友可以參考下2016-05-05jQuery實(shí)現(xiàn)頁碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁
本片文章教給大家用jQuery實(shí)現(xiàn)頁碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁,效果非常好而且沒有頁面刷新,需要的朋友學(xué)習(xí)下吧。2017-12-12