How to use querySelectorAll only for elements that have a specific attribute set?

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?

Copal

does this include blanks? like values="" – Eloisaeloise

the other checkboxes have no value at all so it wouldn't have to include that. – Copal

Answer 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.

Eloisaeloise

How to select only checkbox type inputs though? there are lots of other input tags that have value attributes, but I only want the checkboxes. – Copal

@Copal add [type="checkbox"]. Updated my answer. – Eloisaeloise

GREAT ANSWER! This eliminates largely the need for including jQuery in mini libraries for DOM traversal. I've got some extra tips in an answer below. – Potter

could you tell me what is this syntax input[value][type="checkbox"]:not([value=""] i didnt see this syntax like this before in javascript – Parrie

@Parrie The syntax uses CSS Selectors. As specified by MDN it "is a string containing one or more CSS selectors separated by commas". You can read about CSS Selectors here. – Mell

Answer 2

With your example:

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

Replace $$ with document.querySelectorAll in the examples:

$$('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 the examples above directly, without the need for additional library, just by adding:

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

Some additions:

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

Rail

Answer 3

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!

Potter