¿Cómo usar querySelectorAll solo para elementos que tienen un conjunto de atributos específico?

124

Estoy intentando usar document.querySelectorAllpara todas las casillas de verificación que tienen el valueatributo establecido.

Hay otras casillas de verificación en la página que no se han valueestablecido y el valor es diferente para cada casilla de verificación. Sin embargo, los identificadores y nombres no son únicos.

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

¿Cómo selecciono solo aquellas casillas de verificación que tienen valores establecidos?

javascript css-selectors selectors-api

— Soryn
fuente

¿Esto incluye espacios en blanco? comovalues=""

— José

las otras casillas de verificación no tienen ningún valor en absoluto, por lo que no tendría que incluir eso.

— Soryn

Respuestas:

217

Puedes usar querySelectorAll()así:

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

Esto se traduce en:

obtiene todas las entradas con el atributo "valor" y tiene el atributo "valor" que no está en blanco.

En esta demostración , desactiva la casilla de verificación con un valor que no está en blanco.

— Joseph
fuente

Sin embargo, ¿cómo seleccionar solo las entradas del tipo de casilla de verificación? hay muchas otras etiquetas de entrada que tienen atributos de valor, pero solo quiero las casillas de verificación.

— Soryn

@Soryn agregar [type="checkbox"]. Actualicé mi respuesta.

— Joseph

¡GRAN RESPUESTA! Esto elimina en gran medida la necesidad de incluir jQuery en mini bibliotecas para el recorrido DOM. Tengo algunos consejos adicionales en una respuesta a continuación.

— mattdlockyer

¿podría decirme cuál es esta sintaxis input [value] [type = "checkbox"]: not ([value = ""] no vi esta sintaxis como esta antes en javascript

— blackHawk

@blackHawk La sintaxis utiliza selectores CSS. Según lo especificado por MDN , "es una cadena que contiene uno o más selectores CSS separados por comas". Puede leer acerca de los selectores CSS aquí .

— martieva

Consejos adicionales:

Múltiples "nots", entrada que NO está oculta ni deshabilitada:

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

También sabías que puedes hacer esto:

node.parentNode.querySelectorAll('div');

Esto es equivalente a jQuery's:

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

Lo que efectivamente encontrará todos los divs en "nodo" y debajo de forma recursiva, ¡MALDITO!

— mattdlockyer
fuente

Con tu ejemplo:

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

Reemplace $$ con document.querySelectorAll en los ejemplos:

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

Utilice los ejemplos directamente con:

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

Algunas adiciones:

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

— Punnerud
fuente