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

css-selectors, javascript, selectors-api

Solution

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.

Problem

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?

Original source