Як використовувати querySelectorAll лише для елементів, які мають певний набір атрибутів?

Я намагаюся використовувати document.querySelectorAllдля всіх прапорців, у яких встановлений valueатрибут.

На сторінці є інші прапорці, які не valueвстановлені, і значення для кожного прапорця різне. Ідентифікатори та назви, однак, не унікальні.

Приклад: <input type="checkbox" id="c2" name="c2" value="DE039230952"/>

Як встановити лише ті прапорці, у яких встановлені значення?

Ви можете використовувати querySelectorAll()так:

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

Це означає:

отримати всі входи з атрибутом "value" і має атрибут "value", який не є порожнім.

У цій демонстрації він вимикає прапорець із незаповненим значенням.

Додаткові поради:

Кілька "nots", вхід, який НЕ прихований і НЕ відключений:

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

Також ви знали, що можете це зробити:

node.parentNode.querySelectorAll('div');

Це еквівалентно jQuery:

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

Який ефективно знайде всі диви в "вузлі" та нижче рекурсивно, ГАРЯЧИЙ ДЕНЬ!

З вашим прикладом:

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

Замініть $$ на document.querySelectorВсі в прикладах:

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

Використовуйте приклади безпосередньо з:

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

Деякі доповнення:

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