Получить профессию в Skypro
Событие при активации checkbox в Chrome API: плагины, атрибуты
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для отслеживания изменений состояния чекбокса необходимо использовать обработчик события change. Вот простой пример кода:
document.querySelector('#checkbox').addEventListener('change', function() {
console.log(`Состояние чекбокса: ${this.checked ? '**включено**' : '**выключено**'}`);
});Замените #checkbox на идентификатор вашего чекбокса. Результат в консоли будет отражать его текущее состояние.
Работаем с массивом чекбоксов
Если речь идет о работе с массивом чекбоксов, важно учесть эффективность и масштабируемость:
// Находим все чекбоксы и настраиваем на них "прослушку" изменений
document.querySelectorAll('input[type=checkbox]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
console.log(`Состояние чекбокса ${checkbox.name}: ${checkbox.checked ? 'установлено' : 'не установлено'}`);
// Если "не установлено", то, возможно, в следующий раз повезет!
});
});В этом примере мы:
- Найдем все чекбоксы с помощью
document.querySelectorAll. - Итерируем их с использованием метода
Array.forEach. - Отслеживаем событие 'change' для каждого из чекбоксов.
Для истинных консерваторов: поддержка устаревших браузеров
Работа со старыми версиями браузеров, включая IE11, может быть коварной, если методы массивов не поддерживаются NodeList. В таком случае полезными могут быть полифиллы или Array.from:
Array.from(document.querySelectorAll('input[type=checkbox]')).forEach(function(checkbox) {
// ... здесь мы добавляем обработчики событий
});Мы используем Array.from() для преобразования NodeList в массив, чтобы с элементами можно было работать, как с массивом.
Извлекаем выбранные элементы
С помощью Array.filter и Array.map мы можем получить значения выбранных чекбоксов:
let checkedValues = Array.from(document.querySelectorAll('input[type=checkbox]:checked')).map(checkbox => checkbox.value);
// Теперь в переменной checkedValues хранятся выбранные значения. Поздравляем победителей!Продвинутый уровень использования
Играем по правилам
При разработке плагина для Chrome или работы на строго регулируемом сайте ваша логика обработки событий должна быть соответствующей:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.message === 'addCheckboxListeners') {
addCheckboxEventListeners();
// Обработчики событий готовы к действию!
}
});
function addCheckboxEventListeners() {
let checkboxes = document.querySelectorAll('input[type=checkbox]');
checkboxes.forEach(function(checkbox) {
checkbox.removeEventListener('change', checkboxChangeListener);
checkbox.addEventListener('change', checkboxChangeListener);
// "Я вернулся", восклицает легендарный Арнольд.
});
}
function checkboxChangeListener(event) {
let checkbox = event.target;
console.log(`Чекбокс ${checkbox.name} ${checkbox.checked ? 'теперь установлен. Ура!' : 'снят. Следующий раз будет удачнее.'}`);
}
Каскад событий
Действия внутри обработчика события change напрямую зависят от состояния чекбокса :
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function(event) {
if(event.target.checked) {
console.log(`${checkbox.name} отмечен. Празднуем!`);
// Наступает галочечный забег!
} else {
console.log(`${checkbox.name} снят. Возвращаем его обратно.`);
// Он возвращается к невыбранным.
}
});
});Обратите внимание на использование event.target.checked для определения логики выполнения.
Визуализация
Изменение состояния чекбокса можно сравнить с включением или выключением света:
До действия: [🔲] — свет выключен (☁️)
После клика: [✅] — свет включен (☀️)checkbox.addEventListener('change', function() {
if(this.checked) {
console.log('Чекбокс установлен. И свет над миром! 💡');
} else {
console.log('Чекбокс снят. Наступает тьма... 🌑');
}
});Каждый клик — это как переключение света.
Лучше один раз увидеть
Применяйте JSFIDDLE и другие виртуальные песочницы для иллюстрации вашего кода:
checkbox.addEventListener('change', function() {
console.log('Состояние чекбокса: ', this.checked);
});Следите за течением событий в консоли.
Полезные материалы
<input type="checkbox">– HTML: Язык гипертекстовой разметки | MDN — глубокое изучение работы с чекбоксами.- Как создать пользовательский чекбокс и радиокнопку — искусство стилизации чекбоксов.
- Обработчик событий переключения чекбокса – Stack Overflow — дискуссии и решения сообщества по JavaScript.
- HTMLElement: событие изменения – Веб-API | MDN — детальный анализ механизма отслеживания изменений HTML-элементов.
- Введение в события браузера — пошаговое руководство по событиям в JavaScript.
- GitHub – camsong/You-Dont-Need-jQuery: Примеры выполнения запросов, стилизации, DOM-манипуляций, ajax, событий и прочих действий без jQuery, используя чистый JavaScript. — аргументы в пользу использования нативного JavaScript для работы с событиями.