自制jQuery 复选框全选与反选插件

(function ($) {

    //复选框全选

    $.fn.checkAll = function (options) {

        var defaults = {

                chName:"checkName",     //复选框name属性

                callBack:null          //回调函数

            },

            $obj = $(this),             //引用对象

            $items = $("input:checkbox[name=" + options.chName + "]"),      //所有name匹配的复选框

            checkedItem = 0;            //选中的复选框个数

        options = $.extend(defaults, options);
        //链式调用 

        return this.each(function(){

            $items.click(function () {

                //如果选中总数等于总数

                //全选打勾,label文字变成“全不选”

                //否则，不打勾

                if ($items.length === $items.filter(":checked").length) {

                    $obj.prop("checked", true);

                    $obj.next("label") && $obj.next("label").text("全不选");

                } else {

                    $obj.prop("checked", false);

                    $obj.next("label") && $obj.next("label").text("全 选");

                }

                //执行回调函数

                if (typeof options.callBack === "function") {

                    options.callBack();

                }

            });

            $obj.click(function () {

                //判断该框的状态

                //等于就取消所有选中,label文字变成“全选”

                //否则，选中所有

                if (this.checked) {

                    $items.prop("checked", true);

                    $obj.next("label") && $obj.next("label").text("全不选") ;

                } else {

                    $items.prop("checked", false);

                    $obj.next("label") && $obj.next("label").text("全选");

                }

                if (typeof options.callBack === "function") {

                    options.callBack();

                }

            });

        });

 

    };

})(jQuery);