Heim > Web-Frontend > js-Tutorial > Jquery implementiert die Kontrollkästchen-Vollauswahlmethode_jquery

Jquery implementiert die Kontrollkästchen-Vollauswahlmethode_jquery

WBOY
Freigeben: 2016-05-16 16:17:47
Original
1080 Leute haben es durchsucht

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:

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

   

   



可以达到效果,如果有什么优化的地方,请大家提出,我会做的更好,谢谢大家了,以上就是本文的全部内容了,希望大家能够喜欢.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage