Вопрос или проблема
Мне нужно прослушивать событие нажатия на чекбокс, созданный и отображаемый во представлении через Symfony5 formBuilder. Суть в том, чтобы адаптировать содержание и будущие действия других полей, когда пользователь установит этот чекбокс в состояние “true”. Я не могу найти способ сделать это эффективным. Обратите внимание, что у меня очень ограниченный опыт работы с JavaScript.
Я создаю этот чекбокс в контроллере и устанавливаю его класс с помощью атрибутов twig:
{{ form_widget(form.sameAddress,{'id':"js-same_add_check", 'attr':{'class':"js-add_check"}}) }}
Проблема в том, что с тем способом, которым Symfony отображает чекбокс, это имя класса не указывает на динамический объект ввода. Инспектируя свою страницу, я вижу ее таким образом:
<div class="icheckbox_square-blue" style="position: relative;"><input type="checkbox" id="js-same_add_check" name="form[sameAddress]" class="js-add_check" value="1" style="position: absolute; visibility: hidden;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
<input type="checkbox" id="js-same_add_check" name="form[sameAddress]" class="js-add_check" value="1" style="position: absolute; visibility: hidden;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
</div>
Динамический чекбокс в представлении фактически представлен этим тегом с классом “iCheck-helper”. Но этот класс, кажется, невидим для JavaScript. Вот мой фрагмент JS:
$(document).ready(function() {
console.log('READY!!');
var sameCheck = document.querySelector('.js-add_check');
sameCheck.addEventListener('change', function() {
console.log('В прослушиваемом событии');
if (this.checked) {
console.log("Чекбокс отмечен..");
} else {
console.log("Чекбокс не отмечен..");
}
});
В этом состоянии JS действительно выбрал тег js-add_check. Но никакие нажатия не вызывают событие, только “READY!!” отображается в моих логах консоли (заметьте, что я также пробовал с событием onClick, и что только один тег в моем представлении имеет класс js-add_check). Я попробовал ту же логику, указывая на тег ins (класс “iCheck-helper”). Но это вызывает исключение с addEventListener => Uncaught TypeError: Cannot read properties of null. Затем я попытался указать на родительский div (класс “icheckbox_square-blue”) с намерением получить мой динамический элемент, перебирая его дочерние элементы. И здесь снова кажется, что “icheckbox_square-blue” не существует в моем представлении.
Я чувствую, что мне не хватает некоторых ключевых техник для навигации по DOM, созданному Symfony FormBuilder…
Можете ли вы помочь мне с прослушиванием этого чекбокса и его содержимого с помощью JavaScript?
Ответ или решение
Конечно! Давайте разберемся с вашей проблемой. Судя по вашему описанию, вы используете библиотеку iCheck для стилизации чекбоксов, и это может немного усложнить работу с событиями в JavaScript.
Описание решения
-
Выбор правильного элемента: Поскольку библиотека iCheck заменяет стандартный вид чекбокса, вам нужно слушать события изменения состояния не на самом чекбоксе, а на оберточном элементе. Вы можете использовать событие
changeиз iCheck. - Использование iCheck: Библиотека iCheck создает дополнительную разметку для стилизации, и чтобы корректно работать с чекбоксом, необходимо использовать методы iCheck.
Шаги по фиксации события изменения чекбокса:
- Убедитесь, что вы правильно подключили jQuery и iCheck на вашей странице.
- Примените iCheck к вашему чекбоксу.
- Используйте метод iCheck для прослушивания события изменения.
Пример кода
$(document).ready(function() {
// Инициализация iCheck для вашего чекбокса
$('.js-add_check').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
});
// Слушаем событие изменения состояния чекбокса
$('.js-add_check').on('ifChanged', function(event) {
console.log('В событии изменения');
if ($(this).prop('checked')) {
console.log("Чекбокс отмечен.");
// Здесь вы можете добавить код для изменений других полей
} else {
console.log("Чекбокс не отмечен.");
// Здесь вы можете добавить код для изменений других полей
}
});
});Подключение iCheck (если еще не сделано)
Убедитесь, что вы подключили необходимые файлы CSS и JS для библиотеки iCheck. Например:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/square/blue.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>Заключение
Теперь, когда чекбокс изменит свое состояние, вы получите событие в консоли, и сможете адаптировать поведение других полей на основе состояния чекбокса. Убедитесь, что отображение форм корректно и JavaScript выполняется после полной загрузки страницы. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться!