Wie man jedes angekreuzte Kontrollkästchen mit einem Klassennamen mit JavaScript ohne jQuery durchläuft

Question

Gibt es eine unmittelbare Entsprechung in Javascript für die unten jquery Code?

$('.checkbox').each(function() {
    if ($(this).is(':checked')) {
        //logic here
    }
});

Ich versuche, alle Kontrollkästchen auf einer Seite zu durchlaufen mit class = 'checkbox' - Der Kunde möchte jQuery nicht verwenden, also brauche ich eine Alternative für das oben Genannte.

Ich hoffe, ich kann vermeiden, eine lange Funktion von Grund auf neu zu schreiben, um dies zu tun und einfach etwas in JavaScript eingebaut verwenden, aber es sieht aus wie es nicht möglich ist.

Answer 1

Viele ältere Browser bieten keine Unterstützung für querySelectorAll ou getElementsByClassName Sie müssten also eine Schleife über alle <input> Elemente in diesen Browsern. Es ist jedoch immer am besten, zuerst nach diesen Funktionen zu suchen.

Zweitens: Sie sollten niemals $(this).is(":checked") - nicht einmal in jQuery - es ist ein sehr langsamer Weg, wenn man auf der Suche nach this.checked .

Das sollte Sie in Schwung bringen:

var base = document,
    inps, tmp, i = 0, reg = /\bcheckbox\b/;

// getElementsByClassName is the fastest method
if (base.getElementsByClassName)
    inps = base.getElementsByClassName("checkbox");
// Followed by querySelectorAll
else if (base.querySelectorAll)
    inps = base.querySelectorAll(".checkbox");
// But if neither exist, loop through all the elements and check the class
else {
    inps = [];
    var tmp = base.getElementsByTagName("input");
    i = tmp.length;
    while (i--) {
        if (reg.test(tmp[i].className)
            inps.push(tmp[i]);
    }
}

// Finally, loop through the matched elements and apply your logic
i = inps.length;
while (i--) {
    var current = inps[i];
    if (current.checked) {
        // logic here
    }
}

Im obigen Beispiel können Sie den Wert von base zu jedem Element. Das bedeutet, dass, wenn alle diese Elemente einen gemeinsamen Eltern- oder Vorgängerknoten haben, Sie dieses Element als Basis festlegen können und es sollte schneller laufen, z.B:

var base = document.getElementById("myForm");

Answer 2

var checkboxes = document.getElementsByClassName('checkbox');

for(var i = 0; i < checkboxes.length; i++){
     if(checkboxes[i].checked){}
     else {}
}

Siehe Kommentare unten. Sie können getElementsByTagName für ältere Versionen von IE und anderen älteren Browsern.

Answer 3

Versuchen Sie Folgendes

var all = document.getElementsByClassName('checkbox');
for (var i = 0; i < all.length; i++) {
  var current = all[i];
  if (current.checked) {
    // Logic here
  }
}

Answer 4

Es ist also ziemlich browserabhängig. Aber mit einem modernen Browser würden Sie verwenden document.getElementsByClassName('checkbox') um ein Array zu erhalten, durch das man iterieren kann, dann is(':checked') wird die häufigere if(array[i].checked){} .

Lesen Sie auch über die kompatible Browser . Sie werden feststellen, dass es im Internet Explorer 5.5, 6 und 7 nicht funktioniert.

Ich denke, jQuery umgeht dies in hier herumbrutzeln .

Es könnte also so aussehen:

var allCheckbox;
if (document.getElementsByClassName) {
  allCheckbox = document.getElementsByClassName('checkbox');
} else {
  allCheckbox = new Array();
  var i = 0;
  var all = document.getElementsByTagName('*') {
  for (var j=0; j < all.length; j++) {
    //Comparison cribbed from sizzle
    if ((" " + (all[j].className || all[j].getAttribute("class")) + " ")
      .indexOf('checkbox') > -1
    ) {
      allCheckbox[i++] = all[j];
    }
  }
}
for (var i = 0; i < allChecked.length; i++) {
  if (allChecked[i].checked) {
    // Logic here
  }
}

Letzter Hinweis: getElementsByTagName('*') funktioniert nicht mit Internet Explorer 5.5.

Answer 5

JavaScript hat eingebaute Methoden, um DOM-Elemente nach ID oder Tag-Namen zu finden, aber die Auswahl nach Klasse wird in älteren Versionen des IE nicht unterstützt . Es wäre jedoch relativ schnell möglich, alle input s und testen sie auf die checkbox Typ:

var x=document.getElementsByTagName("input");
for (var i=0; i<x.length; i++) {
    if (x[i].type === "checkbox" && x[i].checked) {
        // do something
    }
} 

Sie können auch testen, ob die Klasse "checkbox" ist, aber das wird kompliziert, wenn sie mehr als eine Klasse haben. Wenn sie es nicht sind:

var x=document.getElementsByTagName("input");
for (var i=0; i<x.length; i++) {
    if (x[i].className === "checkbox" && x[i].checked) {
        // do something
    }
}