Как по нажатию на кнопку активировать/деактивировать все checkbox?

Question

[Apostrophe4]

https://codepen.io/Apostrophe4/pen/OeJVrb?editors=1010
Я хочу чтобы по нажатию на кнопку чекбоксы активировались или исчезали. Сделал функцию клика, решил перебрать циклом, а потом просто каждому присвоить или удалить атрибут, но что-то пошло не так ещё на стадии цикла т.е. тот код который закомментирован перебирает checkbox, а потом должен установить атрибут checked , но этого не происходит. А если просто без цикла по клику устанавливать атрибут checked , то он устанавливается одному элементу, а хотелось бы всем сразу.

<input type="button" class="input">

<input type="checkbox" class="checkbox-input">
<input type="checkbox" class="checkbox-input">
<input type="checkbox" class="checkbox-input">

let input = document.querySelector(".input"),
    checkboxInput = document.querySelector(".checkbox-input");
input.addEventListener("click", function(event){
  for(let i = 0; i < checkboxInput.length; i++) {
    if(checkboxInput.type != "checkbox"){
      checkboxInput[i].removeAttribute("checked", "checked");
    } else {
      checkboxInput[i].setAttribute("checked", "checked");
    }
  }
});

// input.addEventListener("click", function(){
//   for(let i = 0; i < checkboxInput.length; i++) {
//     checkboxInput[i].setAttribute("checked", "checked");
//   }
// });

Comments

[dollar]

Когда публикуете вопрос, там есть кнопка "вставить код".
С ее помощью будет красиво и без искажений.

Answer 1

[Николай]

let input = document.querySelector(".input"),
checkboxInput = document.querySelector(".checkbox-input");

Вы ловите только первые попавшиеся элементы. Используйте querySelectorAll чтобы отловить все элементы, а потом уж пробегаться по ним в цикле.

И еще, сбрасывайте код либо в специальных тегах во вкладке </> или в песочнице, например, тут, более удобно читать его))