html代码:
checkbox plugin
全选 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
js代码一:
jQuery.fn.extend({ check: function(){ return this.each(function(){ this.checked = true;}); //return a jquery object }, uncheck: function(){ return this.each(function(){ this.checked = false;}); }});
此段js插件开发为对象级别插件开发,即给jquery对象方法。
hml中调用的时候,先引入js,然后点击事件触发方法即可。
$('input:checkbox').check();
$('input:checkbox').uncheck();
js代码二:
1 (function($){ 2 var methods = { 3 init: function(options){ 4 return this.each(function(){ 5 var settings = $.extend({}, options); 6 7 var $this = $(this); 8 9 $this.click(function() {10 var ckId = $this.attr('id');11 12 if (ckId == 'checkall') {13 if ($this.attr('checked')) {14 $this.siblings('input:checkbox').attr('checked', true);15 } else {16 $this.siblings('input:checkbox').attr('checked', false);17 }18 }19 });20 });21 }22 };23 24 $.fn.tukiCheck = function(){25 var method = arguments[0];26 27 if (methods[method]) {28 method = methods[method];29 arguments = Array.prototype.slice.call(arguments, 1);30 } else if (typeof(method) == 'object' || !method) {31 method = methods.init;32 } else {33 $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );34 return this;35 }36 37 return method.apply(this, arguments);38 };39 })(jQuery);
此插件开发为对象级别插件开发。也可以
(function($){
$.fn.extend({
})
})(jQuery)
html中调用:$('input:checkbox').tukiCheck();
js代码三:
1 //tuki jquery ext 2 (function($, undefined){ 3 var methods = { 4 checkall : function(){ 5 var $chekcAllObj = $('#checkall'); 6 7 if (undefined != $chekcAllObj) { 8 $chekcAllObj.click(function() { 9 var $this = $(this);10 if ($this.attr('checked')) {11 $this.siblings('input:checkbox').attr('checked', true);12 } else {13 $this.siblings('input:checkbox').attr('checked', false);14 }15 });16 }17 //return true;18 }19 };20 21 $.tukiCheck = function(method) {22 // Method calling logic23 if (methods[method]) {24 return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1));25 } else if (typeof method === 'object' || ! method) {26 return methods.init.apply(this, arguments);27 } else {28 $.error('Method ' + method + ' does not exist on jQuery.tukibox');29 }30 };31 })(jQuery);
此插件开发为类级别开发,即直接为jquery类本身添加方法。
html中调用:$.tukiCheck('checkall');