Jak używać querySelectorAll tylko dla elementów, które mają określony ustawiony atrybut?

Próbuję użyć document.querySelectorAlldla wszystkich pól wyboru, które mają valueustawiony atrybut.

Na stronie znajdują się inne pola wyboru, które nie mają valueustawionych, a wartość jest inna dla każdego pola wyboru. Identyfikatory i nazwy nie są jednak unikalne.

Przykład: <input type="checkbox" id="c2" name="c2" value="DE039230952"/>

Jak wybrać tylko te pola wyboru, które mają ustawione wartości?

Możesz użyć w querySelectorAll()ten sposób:

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

To przekłada się na:

pobiera wszystkie dane wejściowe z atrybutem „wartość” i ma atrybut „wartość”, który nie jest pusty.

W tym demo wyłącza pole wyboru z wartością niepustą.

Dodatkowe wskazówki:

Wiele „nie”, wejście, które NIE jest ukryte i NIE wyłączone:

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

Czy wiesz też, że możesz to zrobić:

node.parentNode.querySelectorAll('div');

Jest to równoważne z jQuery:

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

Która rekurencyjnie znajdzie wszystkie elementy div w „węźle” i poniżej, GORĄCA CHOLERA!

Z twoim przykładem:

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

W przykładach zastąp $$ document.querySelectorAll:

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

Użyj przykładów bezpośrednio z:

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

Niektóre dodatki:

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