JQuery Select All Inverse Selection Deuxième solution invalide

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[]" />子框

Étape 1 : Essayez une onde frontale :

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

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

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!