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

124

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?

Soryń
źródło
1
czy to obejmuje spacje? jakvalues=""
Joseph
inne pola wyboru nie mają żadnej wartości, więc nie musiałoby tego uwzględniać.
Soryn

Odpowiedzi:

217

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ą.

Józef
źródło
Jak jednak wybrać tylko wejścia typu checkbox? istnieje wiele innych tagów wejściowych, które mają atrybuty wartości, ale chcę tylko pól wyboru.
Soryn
1
@Soryn add [type="checkbox"]. Zaktualizowałem moją odpowiedź.
Joseph,
2
ŚWIETNA ODPOWIEDŹ! Eliminuje to w dużej mierze potrzebę dołączania jQuery do mini bibliotek do przechodzenia przez DOM. Poniżej znajduje się kilka dodatkowych wskazówek w odpowiedzi.
mattdlockyer
czy możesz mi powiedzieć, jaka jest ta składnia input [wartość] [typ = "pole wyboru"]: nie ([wartość = ""] nie widziałem wcześniej takiej składni w javascript
blackHawk
@blackHawk Składnia wykorzystuje selektory CSS. Jak określono w MDN , „jest to ciąg zawierający jeden lub więcej selektorów CSS oddzielonych przecinkami”. Możesz przeczytać o selektorach CSS tutaj .
martieva
21

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!

mattdlockyer
źródło
20

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 $()
Punnerud
źródło