用jquery检查/取消复选框列表

问题描述

| 我在网上看到的大多数示例都有一个片段，其中使用了2个复选框，一个仅用于一个复选框（全部），第二个是复选框列表。在myy的情况下，我只有一个复选框列表绑定到数据源，例如我的数据源列表选项是（全部，苹果，橙色，红色，蓝色），除了没有选中所有内容并且我检查了最后一个项目（例如蓝色）时，我大部分都可以使用，它将检查ALL选项。因此无法正常工作。 id是列表中\'All \'项目的ID

<asp:Content ID=\"Content2\" ContentPlaceHolderID=\"MainContent\" runat=\"server\">
    <script src=\"Scripts/jquery-1.4.1.min.js\" type=\"text/javascript\"></script>
    <script type=\"text/javascript\">
 $(document).ready(function () {
     var id = \"#<%=cbOptions.ClientID %>_0\";
     var checkBoxlistid = \"#<%= cbOptions.ClientID %>\";
     $(id).click(function () {
         $(\"#<%= cbOptions.ClientID %> input:checkBox\").attr(\'checked\',this.checked);
     });
     $(checkBoxlistid +  \" input:checkBox\").click(function () {
         if ($(checkBoxlistid).attr(\'value\') != 0) {
             if ($(id).attr(\'checked\') == true && this.checked == false) {
                 $(id).attr(\'checked\',false);
             }
             else {
                 if ($(id).attr(\'checked\') == true && this.checked == true)
                     CheckSelectAll();
             }

         }
     });
     function CheckSelectAll() {
         var flag = true;
         $(checkBoxlistid + \" input:checkBox\").each(function () {
             if ($(checkBoxlistid).attr(\'value\') != 0) {
                 if (this.checked == false) {
                     flag = false;
                 }
                 else {
                     if ($(id).attr(\'checked\') == true && this.checked == false) {
                         flag = false;
                     }
                     else {
                         flag = true;
                     }
                 }
             }
         });

         $(id).attr(\'checked\',flag);
     }
      });    
         </script>
                <asp:CheckBoxList runat=\"server\" ID=\"cbOptions\" >
                </asp:CheckBoxList>
        </asp:Content>

    

解决方法

        

<asp:Content ID=\"Content2\" ContentPlaceHolderID=\"MainContent\" runat=\"server\">
    <script src=\"Scripts/jquery-1.4.1.min.js\" type=\"text/javascript\"></script>
    <script type=\"text/javascript\">
        $(document).ready(function () {
            var id = \"#<%=cbOptions.ClientID %>_0\";
            var checkboxlistid = \"#<%= cbOptions.ClientID %>\";
            $(id).click(function () {
                $(\"#<%= cbOptions.ClientID %> input:checkbox\").attr(\'checked\',this.checked);
            });
            $(checkboxlistid + \" input:checkbox\").click(function () {
            if ($(id).attr(\'checked\') == true && this.checked == false) {
                $(id).attr(\'checked\',false);
            }
            else 
                CheckSelectAll();
            });
            function CheckSelectAll() {
                $(checkboxlistid + \" input:checkbox\").each(function () {
                    var checkedcount = $(checkboxlistid + \" input[type=checkbox]:checked\").length;
                var checkcondition = $(checkboxlistid + \" input[type=checkbox]:\").length - 1
                if (checkedcount >= checkcondition)
                    $(id).attr(\'checked\',true);
                else
                    $(id).attr(\'checked\',false);
                });   
            }
        });    
         </script>
                <asp:CheckBoxList runat=\"server\" ID=\"cbOptions\" >
                </asp:CheckBoxList>
        </asp:Content>

    ,        尝试将此代码作为您的设置选中属性，而不是分别使用true和false分别使用checked和\'\'。更多，您不能对所有复选框使用相同的id。id是唯一的..如果您将相同的id用于全部复选框，则根本无法使用。如果是这样，则将其作为类名并使用

$(.classname)

选择器

function CheckSelectAll() {
             var flag = \"checked\";
             $(checkboxlistid + \" input:checkbox\").each(function () {
                 if ($(checkboxlistid).attr(\'value\') != 0) {
                     if (this.checked == false) {
                         flag = \'\';
                     }
                     else {
                         if ($(id).attr(\'checked\') == true && this.checked == false) {
                             flag = \'\';
                         }
                         else {
                             flag = \"checked\";
                         }
                     }
                 }
             });

             $(id).attr(\'checked\',flag);
         }
          });