Событие при активации 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 для работы с событиями.