使用jQuery选中/取消选中复选框列表

Question

我在网上看到的大多数示例都使用两个复选框，一个用于单个复选框（全部），第二个是复选框列表。在我的情况下，我只有一个绑定到数据源的复选框列表，例如我的数据源列表选项为（全部，苹果，橙子，红色，蓝色）。我已经实现了大部分功能，除了当所有内容都未选中并且我选中最后一项（例如蓝色）时，它会选中“全部”选项，因此无法正常工作。id是列表中“全部”项目的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>

- user282807

---

请您提供纯HTML/JS的代码。 - Niklas

一些内容：http://forums.asp.net/p/1444702/3281548.aspx和http://nice-tutorials.blogspot.com/2010/08/checkuncheck-all-checkboxes-using.html以及http://www.dotnetfunda.com/articles/article894-checkuncheck-all-checkboxes-with-jquery-.aspx。 - xkeshav

好的，我编辑了代码，这就是所有的内容。我在网上搜索并尝试对其进行调整，用JavaScript做得很好，但有时候jQuery语法却让我感到困惑。我只是想要更少的代码，结果却比JavaScript更多。 - user282807

ID已经没问题了，我在查看源代码时验证过了，只是逻辑有些奇怪。 - user282807

问题不在于你目前发布的内容。当我检查时，Blue 只检查了蓝色而没有所有的复选框。这个脚本是没问题的。 - makeitmorehuman

Answer 1

<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>

- user282807

Answer 2

尝试使用此代码作为您的设置已选属性，而不是使用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);
         }
          });  

- run

---

谢谢回复。我尝试了您的函数，但它不起作用。我通过计算选中的数量得到了它的工作方式，我会发布完整的答案。 - user282807