首頁 > web前端 > js教程 > 3Z版基于jquery的图片复选框(asp.net+jquery)_jquery

3Z版基于jquery的图片复选框(asp.net+jquery)_jquery

WBOY
發布: 2016-05-16 18:29:47
原創
1033 人瀏覽過

先上效果图:
3Z版基于jquery的图片复选框(asp.net+jquery)_jquery

html:

复制代码 代码如下:


01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


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一起发出来)
复制代码 代码如下:




相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板