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

javascript css-selectors selectors-api
Soryn picture Soryn · May 28, 2012 · Viewed 175k times · Source

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

Joseph picture Joseph · May 28, 2012

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.

Related questions

Why does JS code "var a = document.querySelector('a[data-a=1]');" cause error?

I've an element in the DOM: <a href="#" data-a="1">Link</a> I want to get this element via its HTML5 custom data attribute data-a. So I write JS codes: var a = document.querySelector('a[data-a=1]'); …

Read More
Using querySelector with IDs that are numbers

From what I understand the HTML5 spec lets you use IDs that are numbers like this. <div id="1"></div> <div id="2"></div> I can access these fine using getElementById but not with …

Read More
Changing CSS pseudo-element styles via JavaScript

Is it possible to change a CSS pseudo-element style via JavaScript? For example, I want to dynamically set the color of the scrollbar like so: document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color"); and I also want to …

Read More