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. POJ 2318 (叉积) TOYS

    题意: 有一个长方形,里面从左到右有n条线段,将矩形分成n+1个格子,编号从左到右为0~n. 端点分别在矩形的上下两条边上,这n条线段互不相交. 现在已知m个点,统计每个格子中点的个数. 分析: 用叉 ...

  2. UVa 10622 (gcd 分解质因数) Perfect P-th Powers

    题意: 对于32位有符号整数x,将其写成x = bp的形式,求p可能的最大值. 分析: 将x分解质因数,然后求所有指数的gcd即可. 对于负数还要再处理一下,负数求得的p必须是奇数才行. #inclu ...

  3. BZOJ_3172_[TJOI2013]_单词_(AC自动机)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=3172 \(n\)个单词组成一篇文章,求每个单词在文章中出现的次数. 分析 这道题很像BZOJ_ ...

  4. Linux 模拟 鼠标 键盘 事件

    /************************************************************************ * Linux 模拟 鼠标 键盘 事件 * 说明: ...

  5. T-SQL查询进阶—理解SQL Server中的锁

    在SQL Server中,每一个查询都会找到最短路径实现自己的目标.如果数据库只接受一个连接一次只执行一个查询.那么查询当然是要多快好省的完成工作.但对于大多数数据库来说是需要同时处理多个查询的.这些 ...

  6. ubuntu下安装JDK详解

    码农博客 即将到期,现将博客中部分文章转载到博客园.本文发表与2012年,转载时略有删减 安装JDK其实只要搞定两个问题,安装目录以及配置文件.如果你只想要快速安装JDK,请略过此部分直接看安装篇. ...

  7. js中的new关键字都干了些什么？

    new 操作符 在有上面的基础概念的介绍之后,在加上new操作符,我们就能完成传统面向对象的class + new的方式创建对象,在javascript中,我们将这类方式成为Pseudoclassic ...

  8. git 的版本回滚

    当用git clone 复制远程代码库到本地时,使用 git branch 只能看到默认库(master),当远程库有多个分支时,可以使用 git branch -a 查看全部的分支, 然后git c ...

  9. C++ 模板类解析

    具体模板类作用这边就不细说了,下面主要是描述下模板类的使用方法以及注意的一些东西. #include <iostream> using namespace std; template &l ...

  10. 1.2CPU和GPU的设计区别

    CPU和GPU之所以大不相同,是由于其设计目标的不同,它们分别针对了两种不同的应用场景.CPU需要很强的通用性来处理各种不同的数据类型,同时又要逻辑判断又会引入大量的分支跳转和中断的处理.这些都使得C ...