Como usar querySelectorAll apenas para elementos que possuem um conjunto de atributos específico?

124

Estou tentando usar document.querySelectorAllpara todas as caixas de seleção que possuem o valueatributo definido.

Existem outras caixas de seleção na página que não foram valuedefinidas e o valor é diferente para cada caixa de seleção. Os IDs e nomes não são exclusivos.

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

Como faço para selecionar apenas as caixas de seleção com valores definidos?

Soryn
fonte
1
isso inclui espaços em branco? comovalues=""
Joseph
as outras caixas de seleção não têm valor, portanto, não é necessário incluir isso.
Soryn 27/05

Respostas:

216

Você pode usar querySelectorAll()assim:

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

Isso se traduz em:

obtenha todas as entradas com o atributo "value" e tenha o atributo "value" que não está em branco.

Nesta demonstração , desativa a caixa de seleção com um valor não em branco.

Joseph
fonte
Como selecionar apenas entradas do tipo caixa de seleção? existem muitas outras tags de entrada que possuem atributos de valor, mas eu só quero as caixas de seleção.
Soryn 27/05
1
@Soryn add [type="checkbox"]. Atualizei minha resposta.
Joseph
2
ÓTIMA RESPOSTA! Isso elimina amplamente a necessidade de incluir o jQuery em mini bibliotecas para travessia do DOM. Tenho algumas dicas extras em uma resposta abaixo.
mattdlockyer
você poderia me dizer o que é esta entrada sintaxe [valor] [type = "checkbox"]: não ([value = ""] eu não ver esta sintaxe como este antes em javascript
Blackhawk
@blackHawk A sintaxe usa seletores CSS. Conforme especificado pelo MDN , "é uma sequência que contém um ou mais seletores CSS separados por vírgulas". Você pode ler sobre seletores CSS aqui .
martieva
21

Dicas extras:

Vários "nots", entrada que NÃO está oculta e NÃO está desabilitada:

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

Você também sabia que pode fazer isso:

node.parentNode.querySelectorAll('div');

Isso é equivalente ao jQuery:

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

Que efetivamente encontrará todas as divs no "nó" e abaixo recursivamente, HOT DAMN!

mattdlockyer
fonte
20

Com o seu exemplo:

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

Substitua $$ por document.querySelectorAll nos exemplos:

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

Use os exemplos diretamente com:

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

Algumas adições:

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