使用jquery检查/解除复选框列表 [英] check/uncehck checkboxlist with jquery

问题描述

我在网上看到的大多数例子都有一个片段，他们使用2个复选框，一个只用一个复选框（全部），第二个是复选框列表。在我的情况下，我只有一个复选框列表绑定到数据源，例如我的数据源列表选项是（全部，苹果，橙色，红色，蓝色），我得到了大部分工作，除非一切都未选中，我检查最后一项，例如蓝色，它检查ALL选项。所以不能正常工作。 id是列表中所有项的ID

most examples i have seen online have a snippet where they use 2 checkboxes, one for just one checkbox (all) and the second is the checkboxlist. In myy case i have only one checkboxlist bound to datasource, example my datasource list options are(All,apple,orange,red,blue), I got most of it working except when everything is unchecked and i check the last item, example blue, it checks the ALL option. so not working properly. id is the id of the 'All' item in the list

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

这篇关于使用jquery检查/解除复选框列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！