如何用JavaScript监听Symfony FormBuilder生成的复选框点击事件

问题背景 #

我在SonataAdminBundle界面中，需要监听Symfony5 FormBuilder生成的复选框点击事件，目的是用户勾选时调整其他字段的内容及后续行为，但JavaScript经验有限，没能找到有效实现方法。

我在控制器创建该复选框，并通过Twig渲染属性设置类和ID：

{{ form_widget(form.sameAddress,{'id':"js-same_add_check", 'attr':{'class':"js-add_check"}}) }}

问题核心 #

Symfony渲染复选框的方式导致设置的类未指向实际可交互元素，页面DOM结构如下：

<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>

实际可点击的是带iCheck-helper类的<ins>标签，但直接监听该标签会报错；监听原复选框的change事件无响应，控制台仅打印READY!!。

我的JS代码片段：

$(document).ready(function() {
    console.log('READY!!');
    var sameCheck = document.querySelector('.js-add_check');

    sameCheck.addEventListener('change', function() {
        console.log('In listened event');
        if (this.checked) {
            console.log("Checkbox is checked..");
        } else {
            console.log("Checkbox is not checked..");
        }
    });
});

解决方案 #

SonataAdmin默认使用iCheck插件美化表单元素，原生表单事件会被插件拦截，需用以下两种方式处理：

方法1：使用iCheck内置事件 #

直接监听iCheck提供的ifChanged事件，该事件会在复选框状态改变时触发：

$(document).ready(function() {
    console.log('READY!!');
    // 监听iCheck美化后的复选框状态变化
    $('.js-add_check').on('ifChanged', function(event) {
        console.log('In listened event');
        if (event.target.checked) {
            console.log("Checkbox is checked..");
            // 此处编写勾选后的逻辑，例如隐藏/显示其他字段
            // 示例：$('#target-field-container').hide();
        } else {
            console.log("Checkbox is not checked..");
            // 此处编写取消勾选后的逻辑
            // 示例：$('#target-field-container').show();
        }
    });

    // 若页面未自动初始化iCheck，手动初始化
    $('.js-add_check').iCheck({
        checkboxClass: 'icheckbox_square-blue'
    });
});

方法2：事件委托到可交互元素 #

若iCheck内置事件无法使用，可将点击事件委托到iCheck-helper元素，同步原复选框状态后监听change事件：

$(document).ready(function() {
    console.log('READY!!');
    // 委托点击事件到iCheck容器，监听可交互的helper元素
    $('.icheckbox_square-blue').on('click', '.iCheck-helper', function() {
        // 找到对应的原复选框
        var checkbox = $(this).siblings('.js-add_check');
        // 切换复选框状态
        checkbox.prop('checked', !checkbox.prop('checked'));
        // 手动触发change事件，方便后续逻辑执行
        checkbox.trigger('change');
    });

    // 监听原复选框的change事件
    $('.js-add_check').on('change', function() {
        console.log('In listened event');
        if ($(this).is(':checked')) {
            console.log("Checkbox is checked..");
            // 执行字段调整逻辑
        } else {
            console.log("Checkbox is not checked..");
        }
    });
});

关键注意点 #

• 不要直接操作iCheck-helper的状态，需通过原<input>元素同步，避免表单提交时状态不一致。
• 确保JS代码在iCheck插件加载完成后执行，防止出现找不到元素的错误。

内容的提问来源于stack exchange，提问作者Yoc