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

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?

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.

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!

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