Как добавить click event ко всем чекбоксам с определенным именем?

Question

[just_clarity]

Чекбоксы вида:

<input class="check-input" type="checkbox" name="firstChecks[]" value="13">
<input class="check-input" type="checkbox" name="firstChecks[]" value="22">
<input class="check-input" type="checkbox" name="firstChecks[]" value="70">

Comments

[just_clarity]

Ivan, хочу по клику на чекбокс отправлять запрос на апишку свою со значением чекбокса (типа настроек).
Сейчас чекбоксы выводятся с помощью php.

[just_clarity]

Ivan,
почему-то ничего не происходит:

document.querySelector('#firstChecks[]').addEventListener('click', () => {
            console.log("test");
        })

[Вадим]

just_clarity,

как добавить click event ко всем чекбоксам с определенным именем

Ну так так и добавляйте.

document.querySelectorAll('check-input[name="firstChecks[]"]')

В чём вопрос?

[just_clarity]

Ivan, короче я понял в чем проблема: если чекбоксы статически прописаны - все работает. Если я вывожу их через PHP - все ломается.

document.addEventListener("DOMContentLoaded", function() {})

не помогает

[Danny Arty]

just_clarity, т.е. они подгружаются динамически?

Answer 1

[otdameskapizm]

Вот так попробуйте

const checkboxes = document.querySelectorAll('[name="firstChecks[]"]');
checkboxes.forEach((elem) => {
  elem.addEventListener('change', (event) => {
    // Здесь логика
  });
});

Comments

[just_clarity]

это отлично работает если код просто в HTML, если я вывожу его с помощью php - не помогает даже обернуть в

document.addEventListener("DOMContentLoaded", function() {})

Answer 2

[Чипекве]

document.addEventListener('change', ({ target }) => {
    if (target.name !== 'firstChecks[]') return;
    // Нужные действия
})