Wie verwende ich querySelectorAll nur für Elemente, für die ein bestimmtes Attribut festgelegt wurde?

124

Ich versuche, document.querySelectorAllfür alle Kontrollkästchen zu verwenden, für die das valueAttribut festgelegt ist.

Es gibt andere Kontrollkästchen auf der Seite, die nicht valuefestgelegt wurden, und der Wert ist für jedes Kontrollkästchen unterschiedlich. Die IDs und Namen sind jedoch nicht eindeutig.

Beispiel: <input type="checkbox" id="c2" name="c2" value="DE039230952"/>

Wie wähle ich nur die Kontrollkästchen aus, für die Werte festgelegt wurden?

Soryn
quelle
1
Beinhaltet dies Leerzeichen? wievalues=""
Joseph
Die anderen Kontrollkästchen haben überhaupt keinen Wert, sodass dies nicht berücksichtigt werden muss.
Soryn

Antworten:

215

Sie können querySelectorAll()wie folgt verwenden:

var test = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');

Dies bedeutet:

Holen Sie sich alle Eingaben mit dem Attribut "Wert" und hat das Attribut "Wert", das nicht leer ist.

In dieser Demo wird das Kontrollkästchen mit einem nicht leeren Wert deaktiviert.

Joseph
quelle
Wie kann man jedoch nur Eingaben vom Typ Kontrollkästchen auswählen? Es gibt viele andere Eingabe-Tags mit Wertattributen, aber ich möchte nur die Kontrollkästchen.
Soryn
1
@Soryn hinzufügen [type="checkbox"]. Meine Antwort wurde aktualisiert.
Joseph
2
GUTE ANTWORT! Dadurch entfällt weitgehend die Notwendigkeit, jQuery für die DOM-Durchquerung in Minibibliotheken aufzunehmen. Ich habe einige zusätzliche Tipps in einer Antwort unten.
Mattdlockyer
Können Sie mir sagen, was diese Syntax ist? Eingabe [Wert] [Typ = "Kontrollkästchen"]: nicht ([Wert = ""] Ich habe diese Syntax noch nie zuvor in Javascript gesehen
blackHawk
@blackHawk Die Syntax verwendet CSS-Selektoren. Wie von MDN angegeben, ist es "eine Zeichenfolge, die einen oder mehrere durch Kommas getrennte CSS-Selektoren enthält". Informationen zu CSS-Selektoren finden Sie hier .
Martieva
21

Zusätzliche Tipps:

Mehrere "Nots", Eingabe, die NICHT ausgeblendet und NICHT deaktiviert ist:

:not([type="hidden"]):not([disabled])

Wussten Sie auch, dass Sie dies tun können:

node.parentNode.querySelectorAll('div');

Dies entspricht jQuery's:

$(node).parent().find('div');

Was effektiv alle Divs in "Node" und darunter rekursiv findet, HOT DAMN!

mattdlockyer
quelle
20

Mit Ihrem Beispiel:

<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

Ersetzen Sie $$ in den folgenden Beispielen durch document.querySelectorAll:

$$('input') //Every input
$$('[id]') //Every element with id
$$('[id="c2"]') //Every element with id="c2"
$$('input,[id]') //Every input + every element with id
$$('input[id]') //Every input including id
$$('input[id="c2"]') //Every input including id="c2"
$$('input#c2') //Every input including id="c2" (same as above)
$$('input#c2[value="DE039230952"]') //Every input including id="c2" and value="DE039230952"
$$('input#c2[value^="DE039"]') //Every input including id="c2" and value has content starting with DE039
$$('input#c2[value$="0952"]') //Every input including id="c2" and value has content ending with 0952
$$('input#c2[value*="39230"]') //Every input including id="c2" and value has content including 39230

Verwenden Sie die Beispiele direkt mit:

const $$ = document.querySelectorAll.bind(document);

Einige Ergänzungen:

$$(.) //The same as $([class])
$$(div > input) //div is parent tag to input
document.querySelector() //equals to $$()[0] or $()
Punnerud
quelle