当事件侦听器使用 javaScript 检查时，handlebars.js 制作的单选按钮不会对脚本生效答案

【问题标题】：radio button made by handlebars.js when checked by an Eventlistener using javaScript doesn't take effect on the script当事件侦听器使用 javaScript 检查时，handlebars.js 制作的单选按钮不会对脚本生效
【发布时间】：2023-01-12 08:13:48
【问题描述】：

我在我的 wordpress 上安装了一个名为 MapSVG 的插件，在插件中它有单选按钮过滤器，我使用构建器添加了自定义按钮，我正在尝试为每个按钮 ID 添加一个 EVENT Listener 到它对应的 Radio，脚本工作正常并且当我点击按钮时，它会反映到相应的收音机，但问题是前端的收音机被选中，但在插件中没有生效，但是当我尝试自己检查收音机时它生效了。 Radios with buttons

这些收音机是用 handlebars.js 编写的

<div class="col-sm-9">
            {{#if placeholder}}
                <div class="radio">
                    <input class="form-check-input" type="radio" name="{{parameterNameShort}}" value="" {{#ifeq value ../value}}checked{{/ifeq}} data-parameter-name="{{parameterNameShort}}">
                    <label class="form-check-label">

                        {{placeholder}}
                    </label>
                </div>
            {{/if}}
    {{#each options}}
                <div class="radio">
                    <input class="form-check-input" type="radio" name="{{../parameterNameShort}}" value="{{value}}" {{#ifeq value ../value}}checked{{/ifeq}} data-parameter-name="{{../parameterNameShort}}">

                    <label class="form-check-label">
                         {{label}}
                    </label>
                </div>

我试图在页脚中添加一个动作来运行一个 JavaScript 函数来将单选按钮的值更改为选中并且它工作正常但是插件过滤器没有生效，我不知道可能是什么问题？

这是我使用的功能

function radios_to_button(){
    ?>
<script>
    const element = document.getElementById("button-1");
    const radios = document.getElementsByClassName("form-check-input");
    element.addEventListener("click", myFunction);

function myFunction() {
    
    radios[3].checked = true;
    
}
    </script>
<?php
}
add_action ('wp_footer', 'radios_to_button');

我希望当 JavaScript Funcion 检查收音机时它会对插件过滤器生效

【问题讨论】：

标签： javascript wordpress handlebars.js

【解决方案1】：

听起来问题在于，当您使用 JavaScript 更改选中的属性时，插件没有收到单选按钮状态已更改的通知。

在更改其选中属性后，您可以尝试在无线电输入上调度更改事件：


    radios[3].checked = true;
    radios[3].dispatchEvent(new Event('change'));

这将通知插件无线电输入的状态已经改变，它应该相应地更新过滤器。

另一种方法是直接与插件的 API 交互并以编程方式更改所选选项。但这将取决于插件及其设计方式。

请记住，这是一个客户端更改，它只会在浏览器上可见，因此如果您需要在页面刷新后保持更改，则必须将值发送到服务器并保存那里。

【讨论】：