How to use querySelectorAll only for elements that have a specific attribute set?
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.
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 inputdocument.querySelector() //equals to $$()[0] or $()
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!