Как я могу отключить все флажки на веб-странице одновременно?

У меня есть несколько наборов флажков на веб-странице. Я хочу снять их все с помощью javascript. Прямо сейчас я делаю это, ища имена каждого набора и снимая их с циклов FOR, подобных этому...

    for (i=0;i<document.getElementsByName("myboxes").length;i++) {
document.getElementsByName("myboxes")[i].checked=false;}

for (i=0;i<document.getElementsByName("moreboxes").length;i++) {
document.getElementsByName("moreboxes")[i].checked=false;}

for (i=0;i<document.getElementsByName("evenmoreboxes").length;i++) {
document.getElementsByName("evenmoreboxes")[i].checked=false;}

Я ищу способ нацелить их всех с помощью одного цикла. Я мог бы сделать getElementsByTagName('input') для всех ВХОДОВ, но это проблема, потому что у меня есть некоторые радиовходы, которые я не хочу снимать. Есть ли способ настроить таргетинг на все checkbox inputs?


Спасибо за предложения. Я просто кое о чем подумал. В каждом ИМЯ, которое я использую, есть слово «ящики», мои ящики, еще ящики, даже больше ящиков. Есть ли способ настроить таргетинг на слово «ящики» в имени, например, на подстановочный знак, что-то вроде document.getElementsByName("*boxes"), таким образом, если я добавлю набор флажков в какой-то момент, который я не хочу снимать, я могу просто назвать их по-другому.

🤔 А знаете ли вы, что...
С JavaScript можно создавать расширения для различных платформ, таких как Adobe Acrobat и Microsoft Office.


107
4

Ответы:

вы можете использовать document.querySelectorAll('input[type = "checkbox"]');, чтобы получить их список. затем запустите свой цикл


Мое предложение:

document.querySelectorAll("[name=myboxes], [name=moreboxes], [name=evenmoreboxes]").forEach((e) => echecked=false);

document.querySelectorAll("[name=myboxes], [name=moreboxes], [name=evenmoreboxes]").forEach((e) => e.checked=false);
<input type = "checkbox" name = "myboxes" value = "1" checked>1<br>
<input type = "checkbox" name = "moreboxes" value = "2" checked>2<br>
<input type = "checkbox" name = "evenmoreboxes" value = "3" checked>3<br>

Как предложил @imjared, вы можете использовать querySelectorAll, но вам придется перебирать его:

querySelectorAll('input[type = "checkbox"]').forEach(c => c.checked = false);

Вот документ для querySelectorAll


Решено

Вы можете установить все отмеченные флажки и сбросить их состояние:

function uncheckAll() {
  document.querySelectorAll('input[name$ = "boxes"]:checked')
    .forEach(checkbox => checkbox.checked = false);
}
<input type = "checkbox"/>
<input type = "checkbox" name = "a_boxes" checked/>
<input type = "checkbox"/>
<input type = "checkbox" name = "b_boxes" checked/>
<input type = "checkbox" name = "c_boxes" checked/>


<button onclick = "uncheckAll()">Reset</button>