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

1.问题引入：

上图一看就明白了需求。

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

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

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

2.实现思路

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

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

3. 具体实现和使用

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

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

本文转自 secondriver 51CTO博客，原文链接：http://blog.51cto.com/aiilive/1377262，如需转载请自行联系原作者