Search code examples
javascriptcss-selectorsselectors-api

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

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?

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.