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(index,domEle){ 
                  if(this.type=="checkbox")
                       this.checked=true;
        });
    反选
        $("#<%=CheckBoxList.ClientID %> input:checkbox").each(function(index,domEle){ 
                 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);
                });
            });
        }
    })();

  • 相关阅读:
    inotify事件监控
    NFS网络文件共享服务
    Rsync数据同步服务
    SSH连接原理及ssh-key讲解
    C语言I博客作业04
    C语言l博客作业03
    C语言I博客作业02
    定义一个计算字符串高度的方法
    字典转模型
    UIScrollView和UIPageControl
  • 原文地址:https://www.cnblogs.com/RuiLei/p/1555776.html
Copyright © 2011-2022 走看看