zoukankan      html  css  js  c++  java
  • JQuery CheckBoxList 全选 反选

    以前我们做CheckBoxList全选,反选,一般用Aspx+CodeFile、或者用JavaScript

    现在我们可以用JQuery来帮我Easy Choose.

    这里我来写三种:

    第一种

    全选

        $(".checkBoxSelect").each(function() {
                    $(this).attr("checked", true); 
         });

    反选

         $(".checkBoxSelect").each(function() {
                            if($(this).attr("checked"))
                            {
                                    $(this).attr("checked", false);
                            }
                            else
                            {
                                    $(this).attr("checked", true);
                            }
                    });

    第二种

    全选

        $("#<%=CheckBoxList.ClientID %> input:checkbox").each(function(){ 
                  if(this.type=="checkbox")
                       this.checked=true;
        });
    反选
        $("#<%=CheckBoxList.ClientID %> input:checkbox").each(function(){ 
                 if(this.type=="checkbox")
                      this.checked=!this.checked;
        });
    第三种
         使用toggle方式进行全选、反选

               btnSelAll.click(function() {
                   jqClass.toggleChecks(null);
               });

               var jqClass= {
                     //Toggle Item For CheckBoxList
                     toggleChecks: function(b) {
                              $("#<%=cblContact.ClientID %> input[type=checkbox]").each(function() {
                                        if (typeof this.checked != "undefined") {
                                                  if (b == null)
                                                        this.checked = (!this.checked);
                                                  else
                                                        this.checked = b;
                                         }
                                });
                  }
           }

    第四种:Plugin 方式

    (function($$) {
        $.fn.jCheckboxList = function(opt) {
            var option = {
                root: '',  //  checkbox id of "select all"
                childCls: ''  // another checkboxs
            };
            var opt = $.extend({}, option, opt);
            var el = $(this).attr('id');
            var allchild = "#" + el + " :input[type=checkbox]." + opt.childCls;
            $("#" + opt.root).click(function() {
                var isChecked = $(this).attr('checked');
                if (isChecked)
                    $(allchild).attr('checked', true);
                else
                    $(allchild).attr('checked', false);
            });

            $.each($(allchild), function(i, v) {
                var all = $(allchild).length;
                $(v).click(function() {
                    var count = $(allchild + "[checked]").length;
                    if (count == all)
                        $("#" + opt.root).attr('checked', true);
                    else
                        $("#" + opt.root).attr('checked', false);
                });
            });
        }
    })();

  • 相关阅读:
    在做城市选择界面时,获取首字母并转化为大写,发现好多网上的代码,个别汉字不能转为拼音(漯河、鄢陵等)
    微信小程序之开发的坑
    前端学习之学习网站
    前端学习之Angular cli
    前端学习之npm国内镜像cnpm和yarn的快速安装
    eclipse Team之pull操作从GitLab上更新项目到本地
    前端学习之angular项目的本地运行步骤
    前端学习之vscode脚本禁用的问题
    maven项目启动提示:启动过滤器异常
    前端学习之Node.js安装及环境配置
  • 原文地址:https://www.cnblogs.com/colder/p/2260513.html
Copyright © 2011-2022 走看看