Как присвоить одну функцию всем чекбоксам?

Question

[Stalk007]

Как сделать так чтобы можно "объединить" все чекбоксы под одно событие, но чтобы они могли так же фильтровать на нативном js
Код:
https://codepen.io/stalk000/pen/qBayOYo

Comments

[Danny Arty]

а jquery принципиально не хотите подключать или нет возможности?

[Stalk007]

Почти, я хочу максимально хорошо разобрать нативный чтобы перейти на фреймворки и библиотеки

Answer 1

[Владимир Майструк]

Вам стоит всем чекбоксам задать отдельный класс, допустим checkbox_input, после js применять к этому классу, это самое легкое решение

Comments

[Stalk007]

я простых путей не ищу) у меня пока что только три чекбокса, но я буду добавлять ещё чекбоксы и после будет очень сложно починить что-то в таком коде

Answer 2

[justifycontent]

Дай всем инпутам один класс, получи их через querySelectorAll и назначь обработчики через forEach.

Comments

[justifycontent]

Заключи это все в функцию и реализуй через передачу аргументов фильтрацию конкретных товаров

[Stalk007]

function fun1(elem) {
  let input = document.querySelectorAll('.input');
  for (let i = 0; i < input.length; i++) {
    input[i].onchange = () => {
      if (input[i].checked) {
        let laptopName = document.querySelectorAll('.laptop-name');
        let laptop = document.querySelectorAll('.laptop');
        for (let i = 0; i < laptopName.length; i++) {
          for (let i = 0; i < laptop.length; i++) {
            if (laptopName[i].textContent == elem) {
            } else {
              laptop[i].style.display = 'none';
            }
          }
        }
      } else {
        let laptop = document.querySelectorAll('.laptop')
        for (let i = 0; i < laptop.length; i++) {
          laptop[i].style.display = 'block';
        }
      }
    }
  }
}
fun1('Фирма: ASUS');
fun1('Фирма: Dell');
fun1('Фирма: Lenovo');

Я вот так умудрил, но сортирует только аргумент последнего вызова