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);
  • 相关阅读:
    ipfs cluster 模式部署使用(docker-compose 环境运行)
    lerna import && add 使用&&常见问题解决
    memsql kafka集成
    memsql 6.7集群安装
    过程、性能基线、性能模型与目标之间的关系
    oracle extract函数
    ORACLE的VARCHAR2是字节还是字符
    infor系统日常问题解决笔记
    Oracle获取当前年、月、日的方法
    Windows下Redis中RedisQFork位置调整
  • 原文地址:https://www.cnblogs.com/webFrontDev/p/2753502.html
Copyright © 2011-2022 走看看