博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery插件开发(checkbox全选的简单实例)
阅读量:6239 次
发布时间:2019-06-22

本文共 3405 字,大约阅读时间需要 11 分钟。

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

转载地址:http://ridia.baihongyu.com/

你可能感兴趣的文章
day01-Python介绍,安装,idea
查看>>
AX函数,将EXCEL列号转为列名
查看>>
UNDO -- Concept
查看>>
养生《一》
查看>>
es6的模块化--AMD/CMD/commonJS/ES6
查看>>
DevStack部署Openstack环境
查看>>
新年最新的100句超牛的语言(转)
查看>>
Chromium Graphics: Graphics and Skia
查看>>
asp.net core mvc上传大文件解决方案
查看>>
二叉树
查看>>
十分简单的抛物线运动
查看>>
乘法逆元(转)
查看>>
android repo库的创建及代码管理
查看>>
tomcat 配置
查看>>
Cloudera Certified Associate Administrator案例之Configure篇
查看>>
QTP完全卸载
查看>>
【跨域】#001 JSONP原理解析【总结】
查看>>
Linux下mysql的安装和配置
查看>>
Scrum 项目 4.0-5.0-约教网站开发(一)
查看>>
CSS3变形transform 2D初级了解
查看>>