JS自动化脚本问题：node.click()无法触发单选框有效选中状态

问题描述 #

我正在为维基共享资源编写用户脚本，针对指定的单选框模块，先后尝试了以下代码：

• node.click()
• node.dispatchEvent(new MouseEvent('click'))
• node.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: false, view: window}))

视觉上单选框已显示选中状态，但点击Next按钮时仍弹出‘Selection is required’错误提示，为何JS模拟点击与人工点击效果不一致？

问题原因与解决方法 #

核心原因 #

页面的表单校验逻辑并非只依赖视觉状态，而是同时依赖两个关键要素：

1. 原生单选框<input type="radio">的checked属性是否真实同步
2. 浏览器原生表单交互触发的change等事件，用于标记“用户已主动完成选择”

模拟点击的方式可能只更新了自定义UI的视觉样式，却没触发生原生元素的属性变更，或者没触发校验逻辑绑定的核心事件，导致系统判定“未完成选择”。

可行解决方案 #

• 直接修改原生属性+触发change事件（优先尝试）：
  找到真正的原生<input type="radio">元素，执行以下代码：

  node.checked = true;
  node.dispatchEvent(new Event('change', { bubbles: true }));
  

• 定位正确的操作节点：如果单选框是自定义UI（原生input被隐藏在外层容器下），不要操作外层的视觉节点，必须找到底层的<input>元素再执行上述操作
• 避免仅依赖click事件：人工点击时浏览器会自动完成“属性变更+触发change事件”的完整流程，而模拟click可能只触发了UI更新，缺了关键的属性同步和事件链

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