Click() 函数在 wordpress Javascript 中不起作用答案

【问题标题】：Click() function not working in wordpress JavascriptClick() 函数在 wordpress Javascript 中不起作用
【发布时间】：2021-08-07 14:22:08
【问题描述】：

我想用 js 自动点击一个单选元素。元素选择是完美的，因为当我尝试使用 innerHTML 更改它时，它会更改但 click() 不起作用。

代码：

document.addEventListener("DOMContentLoaded", function(){
    document.querySelector(".jet-radio-list__label").innerHTML = "Changed!"
    document.querySelector(".jet-radio-list__label").click()
}

尝试过的替代方案，例如：

document.querySelectorAll('input[type="radio"]').checked = true;

我想要定位的 DOM 元素：

【问题讨论】：

你能添加单选按钮的 HTML 吗？
querySelectorAll 返回数组，所以querySelectorAll()[0].checked = true。更好地为每个单选按钮使用正确的 ID
在问题中添加了 DOM 图像。请查阅。它的 wordpress 所以请记住，我对 HTML 没有太多控制权。
@Justinas 我在整个页面上总共有 2 个无线电输入，我希望他们两个都能应用这个 js。我无法控制 HTML，因为我使用的是 wordpress 和 elementor，所以我们可能需要一个 workaroud。我该怎么做？
chrwahl 提到的首选方法是检查单选按钮：stackoverflow.com/questions/21166860/… 注意：您还单击jet-radio-list__label 而不是jet-radio-list__input

标签： javascript wordpress

【解决方案1】：

可能类似于以下内容？：

document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('input[type="radio"]').forEach(
      (input) => input.checked = true
    );
});

label { display: block; }

<form>
  <label>Radio 1 (field1) <input type="radio" name="field1" value="1" /></label>
  <label>Radio 2 (field1) <input type="radio" name="field1" value="2" /></label>
  <br />
  <label>Radio 3 (field2) <input type="radio" name="field2" value="3" /></label>
</form>

【讨论】：

【解决方案2】：

您不能单击单选按钮，但可以将元素设置为“选中”。然后您可以在需要时调度事件。

document.addEventListener('DOMContentLoaded', e => {
  document.forms.test.radio01.addEventListener('change', e => {
    console.log(e.target);
  });

  document.forms.test.radio01.checked = true;
  let change_event = new Event('change');
  document.forms.test.radio01.dispatchEvent(change_event);
});

<form name="test">
  <label id="label01">Radio01: <input type="radio" name="radio01" /></label>
</form>

【讨论】：

也试过了，但是没用。
@ZaeemJaved 如果有帮助，我做了更新。