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

124

J'essaie d'utiliser document.querySelectorAllpour toutes les cases à cocher qui ont l' valueattribut défini.

Il existe d'autres cases à cocher sur la page qui n'ont pas été valuedéfinies, et la valeur est différente pour chaque case à cocher. Cependant, les identifiants et les noms ne sont 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?

javascript css-selectors selectors-api

— Soryn
source

cela inclut-il les blancs? commevalues=""

— Joseph

les autres cases à cocher n'ont aucune valeur du tout, il n'est donc pas nécessaire de l'inclure.

— Soryn

Réponses:

217

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 avoir l'attribut «valeur» qui n'est pas vide.

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

— Joseph
source

Comment sélectionner uniquement les entrées de type case à cocher? il y a beaucoup d'autres balises d'entrée qui ont des attributs de valeur, mais je ne veux que les cases à cocher.

— Soryn

@Soryn ajouter [type="checkbox"]. J'ai mis à jour ma réponse.

— Joseph

TRÈS BONNE RÉPONSE! Cela élimine en grande partie le besoin d'inclure jQuery dans des mini bibliothèques pour la traversée DOM. J'ai quelques conseils supplémentaires dans une réponse ci-dessous.

— mattdlockyer

pourriez-vous me dire quelle est cette syntaxe input [value] [type = "checkbox"]: not ([value = ""] je

— n'ai

@blackHawk La syntaxe utilise des sélecteurs CSS. Comme spécifié par MDN, c'est "une chaîne contenant un ou plusieurs sélecteurs CSS séparés par des virgules". Vous pouvez en savoir plus sur les sélecteurs CSS ici .

— martieva

Conseils supplémentaires:

Plusieurs "nots", entrée qui n'est PAS masquée et NON désactivée:

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

Saviez-vous également que vous pouvez faire ceci:

node.parentNode.querySelectorAll('div');

Ceci est équivalent à jQuery:

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

Ce qui trouvera effectivement toutes les divs dans "node" et en dessous récursivement, HOT DAMN!

— mattdlockyer
source

Avec votre exemple:

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

Remplacez $$ par document.querySelectorAll dans les exemples:

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

— Punnerud
source