html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>checkbox plugin</title>

<script type="text/javascript" src="../jquery-1.8.2.js"></script>

<script type="text/javascript" src="check.js"></script>

<!--

<script type="text/javascript" src="check2.js"></script>

-->

<script type="text/javascript" src="check3.js"></script>

</head>

<body>

    <div>

        <button onclick="CheckAll();">选择全部</button>

        <button onclick="UnCheckAll();">清除全部</button>

        <hr />

        <input type="checkbox"  id="checkall" />全选<br />

        <input type="checkbox"  id="c2" />测试<br />

        <input type="checkbox"  id="Checkbox1" />测试<br />

        <input type="checkbox"  id="Checkbox2" />测试<br />

        <input type="checkbox"  id="Checkbox3" />测试<br />

        <input type="checkbox"  id="Checkbox4" />测试<br />

        <input type="checkbox"  id="Checkbox5" />测试<br />

        <input type="checkbox"  id="Checkbox6" />测试<br />

        <input type="checkbox"  id="Checkbox7" />测试<br />

        <input type="checkbox"  id="Checkbox8" />测试<br />

        <input type="checkbox"  id="Checkbox9" />测试<br />

        <input type="checkbox"  id="Checkbox10" />测试<br />

    </div>

<script type="text/javascript">

function CheckAll(){

    $('input:checkbox').check();

}

function UnCheckAll(){

    $('input:checkbox').uncheck();

}

$(function(){

    //$('input:checkbox').tukiCheck();

    $.tukiCheck('checkall');

});

</script>

</body>

</html>

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代码二：

 (function($){

     var methods = {

         init: function(options){

             return this.each(function(){

                 var settings = $.extend({}, options);

                 var $this = $(this);

                 $this.click(function() {

                     var ckId = $this.attr('id');

                     if (ckId == 'checkall') {

                         if ($this.attr('checked')) {

                             $this.siblings('input:checkbox').attr('checked', true);

                         } else {

                             $this.siblings('input:checkbox').attr('checked', false);

                         }

                     }

                 });

             });

         }

     };

     $.fn.tukiCheck = function(){

         var method = arguments[];

         if (methods[method]) {

             method = methods[method];

             arguments = Array.prototype.slice.call(arguments, );

         } else if (typeof(method) == 'object' || !method) {

             method = methods.init;

         } else {

             $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );

             return this;

         }

         return method.apply(this, arguments);

     };

 })(jQuery);

此插件开发为对象级别插件开发。也可以

(function($){

　　$.fn.extend({

　　})

})(jQuery)

html中调用：$('input:checkbox').tukiCheck();

js代码三：

 //tuki jquery ext

 (function($, undefined){

     var methods = {

         checkall : function(){

             var $chekcAllObj = $('#checkall');

             if (undefined != $chekcAllObj) {

                 $chekcAllObj.click(function() {

                     var $this = $(this);

                     if ($this.attr('checked')) {

                         $this.siblings('input:checkbox').attr('checked', true);

                     } else {

                         $this.siblings('input:checkbox').attr('checked', false);

                     }

                 });

             }

             //return true;

         }

     };

     $.tukiCheck = function(method) {

         // Method calling logic

         if (methods[method]) {

             return methods[ method ].apply(this, Array.prototype.slice.call(arguments, ));

         } else if (typeof method === 'object' || ! method) {

             return methods.init.apply(this, arguments);

         } else {

             $.error('Method ' +  method + ' does not exist on jQuery.tukibox');

         }

     };

 })(jQuery);

此插件开发为类级别开发，即直接为jquery类本身添加方法。

html中调用：$.tukiCheck('checkall');

jquery插件开发(checkbox全选的简单实例)的更多相关文章

  1. jQuery实现CheckBox全选、全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery设置checkbox全选（区别jQuery版本）

    jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...

  3. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  4. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  5. Jquery 组 checkbox全选checkbox

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  6. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  7. jquery实现checkbox全选和全部取消，以及获取值

    在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...

  8. jquery的checkbox 全选和全不选

    今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...

  9. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

随机推荐

  1. C#第三方控件的使用

    一.DEVEXPRESS的使用 官网:https://www.devexpress.com/ 入门教程:http://wenku.baidu.com/link?url=2sXEEby1ffx9JTWG ...

  2. Failed to lunch test error when run with Appium （已解决）

    [2015-08-10 15:09:07 - androidtest1] Performing android.test.InstrumentationTestRunner JUnit launch[ ...

  3. Kafka Unknow host

    今天在测试kafka时遇到 Unknow host问题,经过Google,找到了解决办法,总结如下: 原因:Linux主机名称为null 第一步通过修改/etc/sysconfig/network 中 ...

  4. [NOI导刊2011]影像之结构化特征

    问题描述 在影像比对中,有一种方法是利用影像中的边缘(edge)资讯,计算每个边缘资讯中具有代表性的结构化特征,以作为比对两张影像是否相似的判断标准.Water-filling方法是从每个边缘图的一个 ...

  5. Deep learning：三十四(用NN实现数据的降维)

    数据降维的重要性就不必说了,而用NN(神经网络)来对数据进行大量的降维是从2006开始的,这起源于2006年science上的一篇文章:reducing the dimensionality of d ...

  6. javascript设计模式6

    单体模式:用来划分命名空间而组织一些方法和属性的对象,如果它能被实例化,只能被实例化一次:但对象不是单体 var Singleton={ attr1:true; attr2:2, method1:fu ...

  7. php 实现文件下载，兼容IE、Firefox、Chrome等浏览器

    一.下载任意文件: Header ( "Content-type: application/octet-stream" ); $ua = $_SERVER ["HTTP_ ...

  8. Memcached使用笔记

    1.linux启动memcached命令 进入到memcached安装目录,可以用whereis memcached查看,默认安装在/usr/bin/目录下 输入以下命令,下面两行任选一行就可以了 m ...

  9. iOS面试知识集锦

    最近在面试iOS应聘者过程中,发现很多面试者基础都比较薄弱,但是项目经验都写的很多,问几个问题基本上就可以了解大概的情况了,今天看到cocoachina上这篇面试题不错,分享给大家~~~ OC的理解与 ...

  10. URL- 含义及组成

    URL (uniform resource locator) : 互联网的每个网页都有自己唯一的统一资源定位器,由3部分组成:通信协议,主机名,资源名. HTTP(hypertext transfer ...