Hoe querySelectorAll alleen te gebruiken voor elementen met een specifieke attributenset?

Ik probeer document.querySelectorAllte gebruiken voor alle selectievakjes waarvoor het kenmerk valueis ingesteld.

Er zijn andere selectievakjes op de pagina waarvoor geen valueis ingesteld, en de waarde is voor elk selectievakje anders. De id’s en namen zijn echter niet uniek.

Voorbeeld:
<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

Hoe selecteer ik alleen die selectievakjes waarvoor waarden zijn ingesteld?

Antwoord 1, autoriteit 100%

U kunt querySelectorAll()als volgt gebruiken:

var test = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');

Dit vertaalt zich naar:

verkrijg alle invoer met het kenmerk “waarde” en heeft het kenmerk “waarde” dat niet leeg is.

In deze demowordt het selectievakje met een niet-lege waarde uitgeschakeld.

Antwoord 2, autoriteit 12%

Met jouw voorbeeld:

<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

Vervang $$ door document.querySelectorAll in de voorbeelden:

$$('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

Gebruik de voorbeelden direct met:

const $$ = document.querySelectorAll.bind(document);

Enkele toevoegingen:

$$(.) //The same as $([class])
$$(div > input) //div is parent tag to input
document.querySelector() //equals to $$()[0] or $()

Antwoord 3, autoriteit 7%

Extra tips:

Meerdere “nots”, invoer die NIET verborgen en NIET uitgeschakeld is:

:not([type="hidden"]):not([disabled])

Wist je ook dat je dit kunt doen:

node.parentNode.querySelectorAll('div');

Dit is gelijk aan jQuery’s:

$(node).parent().find('div');

Die effectief alle div’s in “node” en lager recursief vindt, HOT DAMN!