jquery插件开发(checkbox全选的简单实例)

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

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

posted @ 2013-10-17 16:26  幻星宇  阅读(477)  评论(0)  编辑  收藏  举报