How to use querySelectorAll only for elements that

问题:

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?

回答1:

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.

回答2:

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!