纯JavaScript实现选中单选按钮提交表单失败，如何解决？

你原有代码存在两个核心问题：

1. document.querySelectorAll() 返回的是匹配到的所有元素组成的NodeList集合，而非单个DOM元素，集合本身不存在checked属性，因此判断逻辑始终不生效。
2. 代码仅在页面加载时执行了一次判断，没有绑定事件监听器，后续选中单选按钮的操作不会触发这段逻辑运行。

完整实现代码 #

// 获取所有name为myRadioButton的单选按钮
const radioBtns = document.querySelectorAll("input[name='myRadioButton']");

// 遍历所有单选按钮，绑定change事件监听
radioBtns.forEach(btn => {
  btn.addEventListener('change', function() {
    // 单选按钮被选中时提交所属表单
    // 若单选按钮在目标表单内部，可直接通过this.form获取所属表单实例
    this.form.submit();
    
    // 测试阶段可替换为下面的代码验证触发效果
    // alert('单选按钮已选中，表单即将提交')
  })
})

补充说明 #

• 如果你需要提交的不是单选按钮所属的表单，可以手动指定表单元素：

// 替换为你实际的表单ID
const targetForm = document.getElementById('formId');
targetForm.submit();

• 单选按钮的change事件仅在选项被选中时触发，因此不需要额外加if(this.checked)的判断逻辑也可正常运行。

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