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

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?

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.

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!

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 $()