Как использовать querySelectorAll только для элементов, для которых установлен определенный атрибут?

124

Я пытаюсь использовать document.querySelectorAllдля всех флажков, у которых установлен valueатрибут.

На странице есть другие флажки, которые не valueустановлены, и значение каждого флажка отличается. Однако идентификаторы и имена не уникальны.

Пример: <input type="checkbox" id="c2" name="c2" value="DE039230952"/>

Как установить только те флажки, для которых установлены значения?

javascript css-selectors selectors-api

— Soryn
источник

включает ли это пробелы? нравитсяvalues=""

— Joseph

другие флажки вообще не имеют значения, поэтому включать это не обязательно.

— Сорин

Ответы:

217

Вы можете использовать querySelectorAll()это так:

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

Это означает:

получить все входные данные с атрибутом «значение» и иметь непустой атрибут «значение».

В этой демонстрации он отключает флажок с непустым значением.

— Джозеф
источник

Как выбрать только входы типа флажка? есть много других тегов ввода, которые имеют атрибуты значения, но мне нужны только флажки.

— Сорин

@Soryn доп [type="checkbox"]. Обновил свой ответ.

— Джозеф

ОТЛИЧНЫЙ ОТВЕТ! Это в значительной степени устраняет необходимость включения jQuery в мини-библиотеки для обхода DOM. В ответе ниже у меня есть несколько дополнительных советов.

— mattdlockyer

не могли бы вы сказать мне, что это за синтаксис input [значение] [type = "checkbox"]: not ([value = ""] Я не видел такого синтаксиса раньше в javascript

— blackHawk

@blackHawk В синтаксисе используются селекторы CSS. Как указано MDN, это «строка, содержащая один или несколько селекторов CSS, разделенных запятыми». Вы можете прочитать о селекторах CSS здесь .

— Мартьева

Дополнительные советы:

Множественные "Ноты", ввод, который НЕ скрыт и НЕ отключен:

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

Знаете ли вы, что вы можете это сделать:

node.parentNode.querySelectorAll('div');

Это эквивалентно jQuery:

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

Которая будет эффективно находить все div в "узле" и ниже рекурсивно, ГОРЯЧАЯ ЧЕРТА!

— mattdlockyer
источник

С вашим примером:

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

Замените $$ на 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

Используйте примеры непосредственно с:

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

Некоторые дополнения:

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

— Punnerud
источник