使用JavaScript获取单选框选中值遇问题，请求技术帮助

核心问题 #

把复选框换成单选框后，form.elements.video返回的是RadioNodeList（单选框集合），而非单个DOM元素，直接访问check.checked只会判断集合的第一个元素是否选中，自然无法触发正确逻辑。

修复步骤 #

1. 修正HTML标签规范（可选但重要）

<input>是自闭合标签，不能用</input>包裹文本，正确写法是用<label>关联单选框和文本，避免布局或交互异常：

<div class="card">
  <form id="form">
    <label><h1>What video would you like to watch?</h1></label>

    <label><input type="radio" id="video1" name="video" value="red">Mario Recreation</label><br>
    <label><input type="radio" id="video2" name="video" value="blue">Zelda Recreation</label><br>
    <label><input type="radio" id="video3" name="video" value="green">Castlevania Recreation</label><br>

    <input type="button" value="submit" onclick="video()"/>
    <input type="button" value="Reset Colors" onclick="undoColor()">
  </form>
</div>

2. 修复JavaScript逻辑

需要从单选框集合中找到被选中的项，以下两种方法都可行：

方法一：遍历RadioNodeList

function video() {
  let background = document.getElementById("background");
  if (!background) return; // 先检查目标元素是否存在，避免报错

  let form = document.getElementById("form");
  let radios = form.elements.video;

  // 遍历单选框集合，找到选中的项
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked == true) {
      background.style.color = radios[i].value;
      break; // 单选框只会有一个选中，找到后直接跳出循环
    }
  }
}

方法二：使用querySelector直接获取选中项

你之前尝试的querySelector方案无效，大概率是因为#background元素不存在，修正后：

function video() {
  let background = document.getElementById("background");
  if (!background) return;

  let checkedRadio = document.querySelector("input[name='video']:checked");
  if (checkedRadio) { // 先判断是否有选中项
    background.style.color = checkedRadio.value;
  }
}

额外注意点 #

• 确保页面中存在id="background"的元素，否则document.getElementById会返回null，后续代码无法执行
• 单选框默认没有选中项，可给其中一个加上checked属性作为默认值，比如<input type="radio" ... checked>
• if(xxx == true)可以简化为if(xxx)，但如果你习惯原写法也可以保留，不影响功能

内容的提问来源于stack exchange，提问作者Dominic B.