Heim > Web-Frontend > js-Tutorial > Hauptteil

So beheben Sie den zweiten Fehler von JQuery Select/Inverse Selection

小云云
Freigeben: 2017-12-27 09:03:58
Original
1207 Leute haben es durchsucht

Kürzlich bin ich im Projekt auf ein Problem gestoßen. Beim Testen der Funktion „Auswählen/Auswählen aufheben“ kann der Status „Alles ausgewählt/nicht ausgewählt“ des Unterfelds synchronisiert werden. Wenn dann auf das übergeordnete Feld geklickt wird, reagiert der Unterrahmen nicht mehr. In diesem Artikel finden Sie einen Artikel zur Lösung des Problems, dass die vollständige Auswahl/inverse Auswahl von JQuery zum zweiten Mal fehlschlägt. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und werfen wir einen Blick darauf. Ich hoffe, es kann allen helfen.

Die Schlüsselstruktur des Originalcodes ist wie folgt:

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[]" />子框
Nach dem Login kopieren

Schritt 1: Versuchen Sie es mit einer Front-on-Welle:

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

Pawn---- -Hat überhaupt keine Wirkung, lass es.

Schritt 2: Eine schnelle Online-Suche und festgestellt, dass dieses Problem relativ häufig vorkommt. Unter den Menschen, die auf dieses Problem gestoßen sind, sollte ich Tausende von Kilometern entfernt sein. Ich habe ein paar durchgeklickt und im Grunde gesagt, dass die Verwendung von prop anstelle von attr das Problem lösen kann. Die Lösung lautet wie folgt:

Die im Projekt verwendete Version ist jedoch niedriger als 1.6 und mir wurde gesagt, dass es am besten ist, die Version nicht zu ändern und zu verwerfen.

Schritt 3: Ich habe keine andere Wahl, als JQuery aufzugeben ... Versuchen Sie, die native JS-Schreibmethode zu verwenden. Der Code lautet wie folgt:

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;
   }
  }
}
Nach dem Login kopieren

Testen Sie es und lösen Sie es reibungslos. Tatsächlich ist es ein kleines Problem, aber es hat mir einige Inspiration gegeben. Wenn ich das Problem aus einem anderen Blickwinkel betrachte, kann ich es oft besser lösen.

Verwandte Empfehlungen:

js-Implementierung zum Auswählen aller und Aufheben der Auswahl

So wählen Sie alle Kontrollkästchen in js aus und invertieren sie

Js implementiert die vollständige Front-End-Auswahl und die inverse Auswahl

Das obige ist der detaillierte Inhalt vonSo beheben Sie den zweiten Fehler von JQuery Select/Inverse Selection. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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