Jquery implémente la méthode de sélection complète de la case à cocher_jquery

Hier matin, j'ai écrit sur la façon d'utiliser Jquery pour tout sélectionner

En fonction des avis de chacun, j'ai modifié certains des aspects mal écrits du programme. C'est parce que mon niveau est limité et qu'il y a diverses choses que je ne peux pas prendre en compte.

À la fin de l'article, j'ai soulevé une question, et je voulais écrire une méthode universelle pour l'appeler, alors j'ai imaginé cet article Quand je suis rentré chez moi le soir, j'ai écrit l'effet

.

Les exemples ci-dessous sont destinés à permettre à chacun de discuter et d'apprendre. Si vous pensez qu'ils sont bons, vous pouvez également les appliquer directement au projet.

1 : Pourquoi écrire cette méthode

Il existe de nombreuses méthodes en ligne pour sélectionner tout et aucun dans une phrase, mais elles semblent avoir négligé un problème. La case à cocher qui sélectionne tout peut contrôler la sous-case à cocher ci-dessous, mais la sous-case à cocher ci-dessous devrait également pouvoir le faire. contrôler la sélection ci-dessus. De cette façon, c'est ma méthode.

2 : Processus de développement : Pour atteindre l'universalité, nous devons résoudre deux problèmes, comment regrouper et comment déterminer quelle case à cocher dans le groupe doit tout sélectionner. J'y ai réfléchi et j'ai pensé que le regroupement par nom pouvait être utilisé. ,

Utilisez la classe pour déterminer s'il s'agit d'un groupe de cases à cocher qui doit être entièrement sélectionné. Recherchez d'abord toutes les classes qui doivent être sélectionnées, puis recherchez l'attribut name. Vous pouvez trouver d'autres sous-cases basées sur l'attribut name. Tant que vous trouvez l'élément, vous pouvez utiliser

.

3 : Fichier, ce qui suit est le js que j'ai implémenté, enregistré sous xs_checkbox_all.js

Copier le code Le code est le suivant :

$(document).ready(function () {
var xsChk = "xsChk";//Style défini
var xsChkAll = "input[type='checkbox'][class='" xsChk "'][name]";//Toutes les cases à cocher qui définissent ce style
$(xsChkAll).each(function () {
        var nom = $(this).attr("nom");
           name = "input[type='checkbox'][class!='" xsChk "'][name='" name "']";//La sous-case à cocher sous cette case de sélection générale
           $(this).click(function () {
               $(name).attr("checked", $(this)[0].checked);
         })
        var xschk = $(this);
           $(name).click(function () {
               var IAll = $(name).length; //Le nombre de toutes les cases à cocher sous ce sous-projet
               var IChk = $(name ":checked").length; //Le nombre de toutes les cases cochées sous ce sous-projet
            var isAllChecked = true ; //Si tout est sélectionné
                 if (IAll != IChk) {
                                                                                                                         
            }
                 $(xschk).attr("checked", isAllChecked);
        });
});
});

Utilisation des pages

Copier le code Le code est le suivant :

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

   


   
   
   

       

全选one

       
        全选
   

       
        1

       
        2

       
        3

       
        4

   

   

   

        全选deux
       
        全选2
   

       
        11

       
        22

       
        33

       
        44

   

   

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