207

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?

2
  • 2
    does this include blanks? like values=""
    – Joseph
    Commented May 27, 2012 at 22:34
  • the other checkboxes have no value at all so it wouldn't have to include that.
    – Soryn
    Commented May 27, 2012 at 23:22

3 Answers 3

359

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.

5
  • 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
    Commented May 27, 2012 at 23:13
  • 1
    @Soryn add [type="checkbox"]. Updated my answer.
    – Joseph
    Commented May 27, 2012 at 23:15
  • 3
    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. Commented Mar 10, 2014 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
    Commented Aug 18, 2016 at 9:10
  • @blackHawk 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.
    – martieva
    Commented Oct 21, 2016 at 14:52
69

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

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.