How to use querySelectorAll only for elements that

Question

I'm trying to use document.querySelectorAll for all checkboxes that have the value attribute set.

There are other checkboxes on the page that do not have value set, and the value is different for each checkbox. The ids and names are not unique though.

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

How do I select just those checkboxes that have values set?

Answer 1

Extra Tips:

Multiple "nots", input that is NOT hidden and NOT disabled:

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

Also did you know you can do this:

node.parentNode.querySelectorAll('div');

This is equivelent to jQuery's:

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

Which will effectively find all divs in "node" and below recursively, HOT DAMN!

Answer 2

You can use querySelectorAll() like this:

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

This translates to:

get all inputs with the attribute "value" and has the attribute "value" that is not blank.

In this demo, it disables the checkbox with a non-blank value.