Comment résoudre le deuxième échec de la sélection/sélection inverse JQuery

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é de la sous-boîte peut être synchronisé, puis la boîte parent peut être cliquée, le sous-cadre ne répond plus. Cet article vous propose un article pour résoudre le problème de l'échec de la sélection complète/sélection inverse de 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 et jetons un œil. J'espère que cela pourra aider tout le monde.

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 :

implémentation js de la sélection et de la désélection de tout

Sélection de case à cocher JS et méthode inverse

Js implémente la sélection complète frontale et la sélection inverse

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!