Maison > interface Web > js tutoriel > JQuery Select All Inverse Selection Deuxième solution invalide

JQuery Select All Inverse Selection Deuxième solution invalide

小云云
Libérer: 2018-01-25 11:38:19
original
1343 Les gens l'ont consulté

Cet article vous propose principalement un article pour résoudre le problème de l'échec de la sélection complète/sélection inverse JQuery pour la deuxième fois. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Récemment, j'ai rencontré un problème dans le projet lors du test de la fonction de sélection/désélection, lorsque la boîte parent est sélectionnée/désélectionnée pour la première fois, l'état entièrement sélectionné/non sélectionné du sous-sélectionné. -box peut être synchronisé, puis cliquez sur la boîte parent, la boîte enfant ne répondra pas.

La structure clé du code original est la suivante :

function selectAll(obj){
    $('input[name="xxx[]"]').attr("checked",obj.checked);
}

<input type="checkbox" id="mother" name="mother" onclick="selectAll(this);"/>全选

<input type="checkbox" id="son1" name="xxx[]" />子框<input type="checkbox" id="son2" name="xxx[]" />子框<input type="checkbox" id="son3" name="xxx[]" />子框<input type="checkbox" id="son4" name="xxx[]" />子框
Copier après la connexion

Étape 1 : Essayez une onde frontale :

function selectAll(obj){
   if(obj.checked) {
    $('input[name="xxx[]"]').attr("checked", true);
   } else {
    $('input[name="xxx[]"]').removeAttr("checked");
   }
}
Copier après la connexion

Le pion -----a aucun effet, abandonnez-le.

Étape 2 : Une recherche rapide en ligne et j'ai constaté que ce problème est relativement courant. Parmi les personnes qui ont rencontré ce problème, je devrais être à des milliers de kilomètres. J'ai cliqué sur quelques-uns et j'ai dit en gros que l'utilisation de prop au lieu de attr pouvait résoudre le problème. Cependant, la solution est la suivante :

Cependant, la version utilisée dans le projet. est inférieur à 1.6 et on m'a dit que la dernière version est inférieure à 1.6. Il est préférable de ne pas modifier la version et de la supprimer.

Étape 3 : Je n'ai pas d'autre choix que d'abandonner JQuery... Essayez d'utiliser la méthode d'écriture native en js. Le code est le suivant :

function selectAll(obj){
 var xxx = document.getElementsByName("xxx[]");
  if(obj.checked) {
   for(var i = 0;i < xxx.length;i++) {
    xxx[i].checked = true;
   }
  } else {
   for(var i = 0;i < xxx.length;i++) {
    xxx[i].checked = false;
   }
  }
}
Copier après la connexion

Testez-le et résolvez-le avec succès. En fait, c'est un petit problème, mais cela m'a donné une certaine inspiration. Je ne peux pas me limiter à une seule case. Si je réfléchis au problème sous un autre angle, je peux souvent mieux le résoudre.

Recommandations associées :

Partager des exemples de sélection de tout avec jquery et de sélection inversée

jquery sélectionne tout/ne sélectionne aucun/sélection inverse une autre méthode d'implémentation (avec js natif)_jquery

jquery sélectionne tout le code d'implémentation de la fonction checkBox (annule la fonction sélectionner tout)_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal