jQuery提供了扩展接口jQuery.extend(Object)和jQuery.fn.extend(Object)，前者是在jQuery对象上进行扩展（同jQuery的工具方法），而后者是在jQuery对象实例集上进行扩展（通常用于制作jQuery插件）。

1.问题引入：

wKiom1MkEMCA4kbuAABZnTGL3ag832.jpg

上图一看就明白了需求。

  • 点击全选，一组复选框全部选中；

  • 取消全选，一组复选框全部未选中；

  • 选中一组复选框中任意一个，如果一组复选框全选中，全选框选中，否则全选框未选中。

  2.实现思路

  • 全选框改变时，更加全选框的状态，更新一组复选框状态；

  • 一组复选框中任意一个改变状态时，检查一组复选框的状态，如果检查结果是一组复选框全选中，更新全选框为选中状态，否则更新全选框为未选中状态。

3. 具体实现和使用

下文中通过对jQuery.fn.extend(Object)进行扩展来实现需求，并且使用jQuery.extend(Object)将上述需求扩展为jQuery对象上的一个方法。

HTML页面代码：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
< html >
< head >
     < title >测试 jQuery extend 方法 和checkbox全选和全取消</ title >
     < style  type = "text/css" >
         body {
             background-color: #eef;
         }
         div {
             width: 800px;
             height: 100px;
             font-weight: 10;
         }
     </ style >
     <!--<script type="text/javascript" src="../../script/jquery/jquery-1.8.0.js"></script>-->
     < script  type = "text/javascript"  src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></ script >
     < script  type = "text/javascript"  src = "../../i_script/jslib/jquery.checkbox.plugins.js" ></ script >
</ head >
< body >
< script  type = "text/javascript" >
     $(document).ready(function () {
         $.checkboxHandler("sport");
     })
</ script >
< fieldset >
     < input  type = "checkbox"  id = "sport"  value = "全选" />全选< br />
     < input  type = "checkbox"  name = "sport"  id = "c1"  value = "足球" />< label  for = "c1" >足球</ label >< br />
     < input  type = "checkbox"  name = "sport"  id = "c2"  value = "篮球" />< label  for = "c2" >篮球</ label >< br />
     < input  type = "checkbox"  name = "sport"  id = "c3"  value = "乒乓球" />< label  for = "c3" >乒乓球</ label >< br />
     < input  type = "checkbox"  name = "sport"  id = "c4"  value = "羽毛球" />< label  for = "c4" >羽毛球</ label >< br />
</ fieldset >
</ body >
</ html >

  说明：

  • 引入JavaScript文件，包括jquery和下面将要封装的功能代码；

  • 页面定义一组复选框，并且单独定义一个复选框（该复选框的id属性值和其要操作的一组复选框的name属性值一致，如上：sport）；

  • 全选框和一组复选框具备了如上所述命名规范，即可以作为一个整体操作，完成 1 中需求功能只需要为插件提供一个能够唯一标识这一组复选框的id，如:"sport"；

  • 使用时仅需要在页面加载完成后调用jQuery扩展的对象方法jQuery.checkboxHandler(id)即可。


    下面是jQuery扩展实现上述功能的代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    /**
      * Created with JetBrains WebStorm.
      * User: http://aiilive.blog.51cto.com
      * Date: 14-3-14
      * Time: 下午2:08
      * 增强jQuery中对checkbox的处理，可以对一组checkbox进行全选，全不选操作
      * 需要jQuery支持
      * -------------Notice-------------
      * 使用jQuery.checkboxHandler(id)方法对一组checkbox添加事件
      * id:
      * id的值是一组类型是checkbox的input的name属性值，
      * 并且作为全选和全不选类型是checkbox的input的id属性值
      *
      * Simple:
      * $(document).ready(function () {
             $.checkboxHandler("sport");
         })
      */
    ( function  ($) {
         jQuery.fn.extend({
             checkboxSelected:  function  () {
                 var  id = $( this ).attr( 'id' );
                 var  flag = ( typeof  $( this ).attr( 'checked' ) ===  'undefined'  ) ?  true  :  false ;
                 $( "input[type=checkbox][name="  + id +  "]" ).each( function  (i, n) {
                     if  (flag) {
                         $(n).removeAttr( "checked" );
                     }  else  {
                         $(n).attr( 'checked' ,  "checked" );
                     }
                 })
             },
             checkboxCheck:  function  () {
                 var  id = $( this ).attr( 'name' );
                 var  flag =  false ;
                 $( "input[type=checkbox][name="  + id +  "]" ).each( function  (i, n) {
                     if  ( typeof  $(n).attr( "checked" ) ===  'undefined' ) {
                         flag =  true ;
                         return  false ;
                     }
                 })
                 if  (flag) {
                     $( "#"  + id).removeAttr( "checked" );
                 }  else  {
                     $( "#"  + id).attr( "checked" ,  "checked" );
                 }
             }
         })
         jQuery.extend({
             checkboxHandler:  function  (id) {
                 $( "#"  + id).bind( "click" ,  function  () {
                     $( this ).checkboxSelected();
                 });
                 $( "input[type=checkbox][name="  + id +  "]" ).bind( "click" ,  function  () {
                     $( this ).each( function  (i, n) {
                         $(n).checkboxCheck();
                     })
                 })
             }
         })
    })(jQuery);