zoukankan      html  css  js  c++  java
  • 自制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);
  • 相关阅读:
    微信开发创建公众号或小程序菜单45064: no permission to use weapp in menu rid:XXXXXXX
    大文件上传:秒传、断点续传、分片上传
    Linux 给文件夹或者文件增加权限
    常见的架构方式
    RabbitMQ集群
    常见的系统架构思想
    RabbitMQ问题分析
    RabbitMQ实战&管理界面
    Linux安装RabbitMQ
    Redis发布订阅及消息阻塞
  • 原文地址:https://www.cnblogs.com/webFrontDev/p/2753502.html
Copyright © 2011-2022 走看看