如何用getElementsByName识别选中单选按钮？表单提交报错咨询

嘿，我来帮你搞定这个JavaScript错误和单选按钮的识别问题～

先说说你遇到的TypeError原因 #

你看到的TypeError: fM.elements("select")[0].checked is not a function有两个核心问题：

• 首先，elements是表单的元素集合，访问它的成员应该用方括号语法elements["select"]或者点语法elements.select，而不是把它当作函数调用elements("select")；
• 其次，checked是单选按钮的布尔属性，不是方法，所以不需要加()，直接用element.checked判断即可。

所以你原来的写法只要改成fM.elements["select"][0].checked，这个错误就会消失啦。

关于if (destiny[0].checked)的写法是否可行 #

当然可以！只要destiny是正确获取到的单选按钮集合（比如const destiny = fM.elements["select"]），你完全可以通过遍历集合里的元素，用checked属性判断哪个被选中。不过要注意，单选按钮是互斥的，所以只要找到第一个checked为true的元素就行。

用getElementsByName识别选中的单选按钮的方法 #

这是更通用的方式，不管表单怎么获取，都能定位到目标单选按钮，具体步骤和代码示例如下：

步骤： #

1. 用document.getElementsByName("select")获取所有name为select的单选按钮，它会返回一个NodeList集合；
2. 遍历这个集合，找到checked属性为true的元素，就是用户选中的那一个；
3. 根据选中按钮的value（你可以给每个单选按钮设置对应PHP页面的路径作为value），设置表单的action属性，然后提交表单。

代码示例： #

function submitForm() {
  // 获取表单元素
  const fM = document.getElementById("fontVortMetodo");
  // 获取所有name为select的单选按钮
  const radioButtons = document.getElementsByName("select");
  let selectedTarget = null;

  // 遍历找选中的按钮
  for (let btn of radioButtons) {
    if (btn.checked) {
      selectedTarget = btn.value;
      break; // 单选按钮只能选一个，找到就停止遍历
    }
  }

  // 如果找到选中的目标页面，提交表单
  if (selectedTarget) {
    fM.action = selectedTarget;
    fM.submit();
  } else {
    alert("请选择一个提交目标页面！");
  }
}

补充说明： #

• 记得给每个单选按钮设置value属性，比如：

<input type="radio" name="select" value="page1.php" /> 提交到页面1
<input type="radio" name="select" value="page2.php" /> 提交到页面2
<input type="radio" name="select" value="page3.php" /> 提交到页面3

• 也可以用更简洁的ES6写法找到选中的按钮：

const selectedBtn = Array.from(radioButtons).find(btn => btn.checked);
if (selectedBtn) {
  fM.action = selectedBtn.value;
  fM.submit();
}

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