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);