用 javascript 监听 Symfony 制作的复选框的滴答声

Question

我需要监听通过 Symfony5 formBuilder 和 sonataAdminBundle 界面中创建并显示在视图中的复选框的单击。这样做的目的是当用户将此复选框设置为“true”时适应一些其他字段内容和未来的行为。我找不到使其有效的方法。请注意，我对 javascript 的经验非常有限。

我在控制器中创建了此复选框，并使用 twig renderig 属性设置其类：

{{ 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('In listened event');
                if (this.checked) {
                    console.log("Checkbox is checked..");
                } else {
                    console.log("Checkbox is not checked..");
                }
        });

在这种状态下，JS已经有效选择了js-add_check标签。但没有点击会触发该事件，只有“READY!!”在我的控制台日志中显示（请注意，我也尝试过 onClick 事件，并且我的视图中只有一个标签具有 js-add_check 类）。 我尝试了指向 ins 标签（类“iCheck-helper”）的相同逻辑。但它抛出异常 addEventListener => Uncaught TypeError: Cannot readproperties of null 然后我尝试指向父 div（类“icheckbox_square-blue”），目的是通过循环 ist 子元素来获取我的动态元素。再次，这就像“icheckbox_square-blue”在我的视图中不存在。

我觉得我错过了一些导航 Symfony FormBuilder 创建的 DOM 的关键技术......

你能指导我用 Javascript 听复选框的勾选和内容吗？

Answer 1

这个显示问题可能与奏鸣曲有关，因为我意识到在通过纯 Symfony 路径重新创建我的方法时，我可以毫无问题地做我想做的事情。通过在纯 HTML 中对有问题的元素进行硬编码，我仍然设法在奏鸣曲视图中获得我想要的内容。我有一个自定义 div，我可以监听其点击事件，并且： • 切换CSS制作的复选框，仅用于视觉确认 • 将变量从 false 切换为 true（反之亦然），这会在单击事件时指导 JS 操作 对于脚本的其余部分，我可以毫无问题地查看表单的其他字段。