Мы нашли все элементы списка. Каждый элемент — отдельная задача. Она состоит из текста и поля с типом checkbox. Такой элемент работает, как переключатель или флаг: если поле пустое, задача ещё не выполнена и ждёт своей очереди. А если внутри стоит отметка, то задача сделана и её можно удалять.

Чтобы что-то сделать с самими задачами, надо поймать ситуации, когда пользователь кликает по чекбоксу и этот элемент становится выбранным. Тут нам пригодятся события.

Мы могли бы добавлять событие клика на всю задачу, на весь элемент <li>, но это решение не оптимальное. Пользователь может случайно кликнуть по задаче, не желая её закрывать.

Можно ловить клик по чекбоксу, это вполне подходящий вариант. Но есть и другое событие, которое тоже подходит — change. Оно срабатывает, когда состояние поля меняется. В случае с чекбоксами, оно срабатывает, когда меняется статус с невыбранного поля на выбранное и наоборот.

Пока мы не нашли чекбоксы внутри элементов списка. Поэтому сначала найдём чекбокс внутри каждой задачи, навесим обработчик и выведем какое-нибудь сообщение в консоль. У нас много элементов, значит алгоритм придётся повторять несколько раз. Поэтому будем использовать функцию. В этом задании мы подготовим эту функцию для работы, а в следующем вызовем её и проверим действительно ли работает наш обработчик. Объявление функции мы уже добавили в код за вас.

Если вы забыли, как добавлять обработчики, можете посмотреть на пример ниже, он показывает синтаксис добавления обработчика:

element.addEventListener('change', function () {
  …
});

А если вы хотите вспомнить, что означает запись из примера, можете заглянуть в это и это задания.

Возможно, вы удивлены тому, что мы перебираем элементы, найденные через querySelectorAll в цикле, как обычный массив. Так делать можно. Потому, что querySelectorAll возвращает коллекцию элементов. Она выглядит как массив, но им не является. Поэтому коллекции называют псевдомассивами. Различия коллекций и массивов мы разберём позже. Пока достаточно знать, что коллекции можно перебирать в цикле, как и массивы. Мы уже встречали коллекции в части «Знакомство с JavaScript в браузере». Например, в этом и этом заданиях.