Jquery implementiert die Kontrollkästchen-Vollauswahlmethode_jquery

Gestern Morgen habe ich darüber geschrieben, wie man mit Jquery alles auswählt

Basierend auf der Meinung aller habe ich einige der schlecht geschriebenen Aspekte des Programms geändert. Dies liegt daran, dass mein Niveau begrenzt ist und es verschiedene Dinge gibt, die ich nicht berücksichtigen kann.

Am Ende des Artikels habe ich eine Frage gestellt und wollte eine universelle Methode schreiben, um sie aufzurufen. Deshalb habe ich mir diesen Artikel ausgedacht. Als ich nachts nach Hause kam, schrieb ich den Effekt

Die folgenden Beispiele sind für alle zum Diskutieren und Lernen gedacht. Wenn Sie sie für gut halten, können Sie sie auch direkt auf das Projekt anwenden.

1: Warum diese Methode schreiben

Es gibt viele Online-Methoden zum Auswählen aller und keiner in einem Satz, aber sie scheinen ein Problem übersehen zu haben. Das Kontrollkästchen, das alle auswählt, kann das untergeordnete Kontrollkästchen unten steuern, aber das untergeordnete Kontrollkästchen sollte dies auch können Steuern Sie die Auswahl oben auf diese Weise. Dies ist meine Methode.

2: Entwicklungsprozess: Um Universalität zu erreichen, müssen wir zwei Probleme lösen: wie man gruppiert und wie man bestimmt, welches Kontrollkästchen in der Gruppe alle auswählen soll. Ich dachte darüber nach und dachte, dass die Gruppierung nach Namen verwendet werden kann ,

Verwenden Sie die Klasse, um zu bestimmen, ob es sich um eine Kontrollkästchengruppe handelt, die vollständig ausgewählt werden muss. Suchen Sie zuerst alle Klassen, die ausgewählt werden müssen, und suchen Sie dann das Namensattribut. Sie können andere Unterkontrollkästchen basierend auf dem Namensattribut finden. Solange Sie das Element finden, können Sie

bedienen

3: Datei, das Folgende ist das von mir implementierte js, gespeichert als xs_checkbox_all.js

Code kopieren Der Code lautet wie folgt:

$(document).ready(function () {
var xsChk = "xsChk";//Definierter Stil
var xsChkAll = "input[type='checkbox'][class='" xsChk "'][name]";//Alle Kontrollkästchen, die diesen Stil definieren
$(xsChkAll).each(function () {
        var name = $(this).attr("name");
           name = "input[type='checkbox'][class!='" xsChk "'][name='" name "']";//Das Unter-Kontrollkästchen unter diesem All-Select-Feld
           $(this).click(function () {
               $(name).attr("checked", $(this)[0].checked);
         })
        var xschk = $(this);
           $(name).click(function () {
               var IAll = $(name).length //Die Anzahl aller Kontrollkästchen unter diesem Unterprojekt
               var IChk = $(name ":checked").length //Die Anzahl aller aktivierten Kontrollkästchen unter diesem Unterprojekt
            var isAllChecked = true; //Ob alles ausgewählt ist
                  if (IAll != IChk) {
IsAllChecked = false;
            }
                 $(xschk).attr("checked", isAllChecked);
        });
});
});

Seitennutzung

Code kopieren Der Code lautet wie folgt:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

   


   
   
   

       

全选one

       
        全选
   

       
        1

       
        2

       
        3

       
        4

   

   

   

       

全选two

       
        全选2
   

       
        11

       
        22

       
        33

       
        44