JQuery CheckBoxList 全选 反选

本文介绍了如何使用jQuery简化CheckBox全选与反选操作,提供了三种实现方式,包括直接操作、利用ID选择器和插件方式,帮助开发者更高效地进行网页交互设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以前我们做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);
            });
        });
    }
})();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值