Überprüfen/Deaktivieren Sie die Checkbox-Liste mit jQuery

Question

Die meisten Beispiele, die ich online gesehen habe, haben einen Ausschnitt, in dem sie 2 Kontrollkästchen verwenden, eines für nur ein Kontrollkästchen (Alle) und das zweite für die Checkbox-Liste. In meinem Fall habe ich nur eine Checkbox-Liste, die an eine Datenquelle gebunden ist, zum Beispiel sind meine Datenquellenoptionen (Alle, Apfel, Orange, Rot, Blau). Ich habe die meiste davon zum Laufen gebracht, außer wenn alles nicht markiert ist und ich das letzte Element markiere, zum Beispiel Blau, wird die ALLE-Option markiert. Funktioniert also nicht richtig. id ist die ID des 'Alle'-Elements in der Liste.

 $(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);
     }
      });

Answer 1

        $(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);
                });   
            }
        });

Answer 2

Probieren Sie diesen Code aus, indem Sie das Attribut "checked" verwenden, anstatt true und false zu verwenden, verwenden Sie checked und '' entsprechend. Darüber hinaus können Sie nicht die gleiche ID für alle Kontrollkästchen haben. IDs sind eindeutig. Wenn Sie dieselbe ID für alle Kontrollkästchen verwenden, funktioniert es überhaupt nicht. In diesem Fall verwenden Sie einen Klassennamen und den $(.Klassenname) Selektor.

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);
         }
          });