139

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?

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
Soryn
  • 1,395
  • 2
  • 9
  • 5

3 Answers3

246

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.

Joseph
  • 107,072
  • 27
  • 170
  • 214
  • 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. – Soryn May 27 '12 at 23:13
  • 1
    @Soryn add `[type="checkbox"]`. Updated my answer. – Joseph May 27 '12 at 23:15
  • 2
    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. – mattdlockyer Mar 10 '14 at 22:25
  • could you tell me what is this syntax input[value][type="checkbox"]:not([value=""] i didnt see this syntax like this before in javascript – blackHawk Aug 18 '16 at 09:10
  • @blackHawk The syntax uses CSS Selectors. As specified by [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) it "is a string containing one or more CSS selectors separated by commas". You can read about CSS Selectors [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). – martieva Oct 21 '16 at 14:52
27

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 directly with:

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 $()
Punnerud
  • 3,630
  • 1
  • 36
  • 32
21

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!

sigpwned
  • 6,057
  • 3
  • 23
  • 44
mattdlockyer
  • 6,057
  • 4
  • 34
  • 43