web-dev-qa-db-fra.com

Comment utiliser querySelectorAll uniquement pour les éléments ayant un ensemble d'attributs spécifique?

J'essaie d'utiliser document.querySelectorAll pour toutes les cases à cocher ayant l'attribut value défini.

Il y a d'autres cases à cocher sur la page pour lesquelles value n'est pas défini, et la valeur est différente pour chaque case à cocher. Les identifiants et les noms ne sont cependant pas uniques.

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

Comment sélectionner uniquement les cases à cocher pour lesquelles des valeurs sont définies?

javascriptcss-selectorsselectors-api
88
Soryn

Vous pouvez utiliser querySelectorAll() comme ceci:

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

Cela se traduit par:

obtenir toutes les entrées avec l'attribut "valeur" et a l'attribut "valeur" qui n'est pas vide.

Dans cette démo , il désactive la case à cocher avec une valeur non vide.

172
Joseph

Conseils supplémentaires:

Plusieurs "nots", entrée qui n'est ni cachée ni désactivée:

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

Aussi saviez-vous que vous pouvez faire ceci:

node.parentNode.querySelectorAll('div');

C'est équivalent à jQuery:

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

Qui trouvera effectivement tous les divs dans "noeud" et ci-dessous récursivement, HOT DAMN!

17
mattdlockyer

Avec votre exemple:

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

Remplacez $$ par document.querySelectorAll dans les exemples suivants:

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

Utilisez les exemples directement avec:

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

Quelques ajouts:

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