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

本文共 3457 字,大约阅读时间需要 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');

转载于:https://www.cnblogs.com/xingmeng/p/3374417.html

你可能感兴趣的文章
java中包的命令行(cmd)操作详解
查看>>
git中fatal: Authentication failed的问题
查看>>
数学建模排版中加页码与首页不加页码问题
查看>>
matlab-1
查看>>
C# 用POST提交json数据
查看>>
cpu亲和性绑定
查看>>
变量 、缓冲值 、编码
查看>>
20160408javaweb之JDBC ---PreparedStatement
查看>>
2018.11.03-dtoj-2092-交通 (traffic)
查看>>
内置模块(二)
查看>>
【HNOI2016】树
查看>>
Java Web整合开发(附录1) - 安装配置环境
查看>>
javascript对象创建
查看>>
linux解压war包的命令
查看>>
MyQThread new
查看>>
js的继承
查看>>
SOCKET用法详解
查看>>
struts2中的OGNL详解
查看>>
C++的虚函数
查看>>
C++11的新特性:右值引用
查看>>