Come utilizzare querySelectorAll solo per gli elementi che hanno un set di attributi specifico?

124

Sto cercando di utilizzare document.querySelectorAllper tutte le caselle di controllo che hanno l' valueattributo impostato.

Ci sono altre caselle di controllo nella pagina che non sono state valueimpostate e il valore è diverso per ciascuna casella di controllo. Tuttavia, gli ID e i nomi non sono univoci.

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

Come faccio a selezionare solo quelle caselle di controllo che hanno valori impostati?

javascript css-selectors selectors-api

— soryn
fonte

questo include spazi vuoti? comevalues=""

— Joseph

le altre caselle di controllo non hanno alcun valore, quindi non dovrebbe includerlo.

— Soryn

Risposte:

217

Puoi usare in querySelectorAll()questo modo:

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

Questo si traduce in:

ottiene tutti gli input con l'attributo "valore" e ha l'attributo "valore" che non è vuoto.

In questa demo , disabilita la casella di controllo con un valore non vuoto.

— Giuseppe
fonte

Come selezionare solo gli input del tipo di casella di controllo? ci sono molti altri tag di input che hanno attributi di valore, ma voglio solo le caselle di controllo.

— Soryn

@Soryn add [type="checkbox"]. Aggiornato la mia risposta.

— Joseph,

BELLA RISPOSTA! Ciò elimina in gran parte la necessità di includere jQuery nelle mini librerie per l'attraversamento DOM. Ho alcuni suggerimenti extra in una risposta di seguito.

— mattdlockyer

potresti dirmi qual è questa sintassi input [value] [type = "checkbox"]: not ([value = ""] non ho visto questa sintassi come questa prima in javascript

— blackHawk

@blackHawk La sintassi utilizza i selettori CSS. Come specificato da MDN , "è una stringa contenente uno o più selettori CSS separati da virgole". Puoi leggere informazioni sui selettori CSS qui .

— martieva

Suggerimenti extra:

Più "non", input che NON è nascosto e NON disabilitato:

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

Inoltre sapevi che puoi farlo:

node.parentNode.querySelectorAll('div');

Questo è equivalente a jQuery:

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

Che troverà effettivamente tutti i div in "node" e sotto in modo ricorsivo, HOT DAMN!

— mattdlockyer
fonte

Con il tuo esempio:

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

Sostituisci $$ con document.querySelectorAll negli esempi:

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

Usa gli esempi direttamente con:

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

Alcune aggiunte:

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

— Punnerud
fonte