Как использовать querySelectorAll только для элементов с определенным набором атрибутов?
Я пытаюсь использовать document.querySelectorAll
для всех флажков с атрибутом value
.
На странице есть другие флажки, на которых нет value
, и значение для каждого флажка отличается. Идентификаторы и имена не уникальны, хотя.
Пример: <input type="checkbox" id="c2" name="c2" value="DE039230952"/>
Как выбрать только те флажки, у которых установлены значения?
Ответы
Ответ 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()
для ввода возвращает по умолчанию только проверочные входы.
Привет;)