Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

Ответ 1

Вы можете использовать querySelectorAll() следующим образом:

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

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

получить все входы с атрибутом "значение" и имеет атрибут "значение", который не является пустым.

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

Ответ 2

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

Несколько "неимущих", вход, который НЕ скрыт и НЕ отключен:

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

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

node.parentNode.querySelectorAll('div');

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

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

Который будет эффективно находить все div в "узле" и ниже рекурсивно, HOT DAMN!

Ответ 3

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

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

Ответ 4

document.querySelectorAll() для ввода возвращает по умолчанию только проверочные входы.

Привет;)