Как выделить все checkbox с помощью js?

Question

[Даулет]

Возникла проблема с кодом:

function selectAllCategory(btn) {
    var checkbox = $(btn).siblings('.filter-second__list').find('.filter-second__checkbox');
    // Programmatically change the `checked` property:'
    $(btn).on('click', function() {
        for (var i = 0; i < checkbox.length; i++) {
            console.log(i);
            if ($(this).is(':checked')) {
                checkbox[i].checked = true;
                triggerEvent(checkbox[i], 'change');
            } else {
                checkbox[i].checked = false;
                triggerEvent(checkbox[i], 'change');
            }
        }
    });
}

В консоли получаю ошибку: Uncaught ReferenceError: triggerEvent is not defined
При этом выделяется/снимается только с одного подэлемента. В цикле for - вообще в консоли показывается цифра 0 вместо количества искомых элементов.
Вот где все это делается:

тыц

https://wrappingstudio.u1067344.plsk.regruhosting....

Answer 1

[Rsa97]

Всё логично. Функция triggerEvent не определена, вам об этом английским по белому пишут.
А поскольку ошибка возникает на первом же шаге цикла, то обрабатывается только один чекбокс и дальше нуля индекс цикла не уходит.

Comments

[Даулет]

Спасибо, понял=), теперь выделения/снятия работают.
Подскажите пожалуйста - при выделении или снятии - отрабатывается запрос, но он не работает, в какую сторону копать?

[Rsa97]

phpneguru, Что значит "отрабатывается, но не работает"? Запрос к серверу? Значит, для начала, открывать консоль разработчика в браузере, смотреть, уходит ли запрос, возвращается ли ответ и какой именно.

Answer 2

[zav19791979]

Как совершенно верно сказал Rsa97 у вас не определен метод triggerEvent, вам необходимо определить его перед вашим методом и тогда будет счастье)

function triggerEvent(checkbox) {
        checkbox.checked = true; //  отметить переданный чекбокс (без использования jQuery)
        // checkbox.attr('checked', true); // то же самое но уже с использованием jQuery
    }

    function selectAllCategory(btn) {
        ...
        ...
        ...
    }

Comments

[Даулет]

Спасибо, уже разобрался=)
Но теперь при выделении не обрабатывается запрос. Т/е все выделяется, но есть элементы которые должны скрыться/появится - они не работают

[zav19791979]

то есть у вас на чекбоксах висят лиссенеры и они не срабатывают?
тогда добавить после выделения тригер на событиее

function triggerEvent(checkbox) {
        checkbox.checked = true; //  отметить переданный чекбокс (без использования jQuery)
        // checkbox.attr('checked', true); // то же самое но уже с использованием jQuery

        const event = new Event('change');
        checkbox.dispatchEvent(event); // вызов события изменения чекбокса без jQury
    }

как это сделать с jQuery не помню, но легко сможете это найти

[Даулет]

zav19791979, вы лучший=) спасибо. Помогли!