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?

javascript css-selectors selectors-api

— Soryn
fonte

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

@Soryn add [type="checkbox"]. Atualizei minha resposta.

— Joseph

Ó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

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

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