如何根据单选框选择实时判断？

在HTML中，根据用户选择的单选框（radio button）进行判断，主要通过JavaScript监听选择变化并执行逻辑判断,以下是详细实现方法：

HTML单选框基础

单选框使用<input type="radio">创建，相同name属性的单选框构成互斥组：

<form id="myForm">
  <label>
    <input type="radio" name="color" value="red"> 红色
  </label>
  <label>
    <input type="radio" name="color" value="blue"> 蓝色
  </label>
  <label>
    <input type="radio" name="color" value="green"> 绿色
  </label>
</form>

JavaScript判断选择的3种方法

方法1：通过事件监听实时响应

const radios = document.querySelectorAll('input[name="color"]');
radios.forEach(radio => {
  radio.addEventListener('change', (e) => {
    const selectedValue = e.target.value;
    if (selectedValue === 'red') {
      console.log("您选择了警告色");
    } else if (selectedValue === 'blue') {
      console.log("冷色调已选择");
    }
    // 更多逻辑...
  });
});

方法2：提交表单时获取选中值

<form onsubmit="return handleSubmit()">
  <!-- 单选框代码同上 -->
  <button type="submit">提交</button>
</form>
<script>
function handleSubmit() {
  const selected = document.querySelector('input[name="color"]:checked');
  if (!selected) {
    alert("请选择一个选项！");
    return false; // 阻止表单提交
  }
  console.log("提交的值:", selected.value);
  return true;
}
</script>

方法3：使用CSS显示/隐藏内容

根据选择动态显示内容：

<div id="redInfo" style="display:none;">红色代表警示</div>
<div id="blueInfo" style="display:none;">蓝色代表冷静</div>
<script>
radios.forEach(radio => {
  radio.addEventListener('change', (e) => {
    // 隐藏所有信息
    document.querySelectorAll('[id$="Info"]').forEach(el => {
      el.style.display = 'none';
    });
    // 显示对应信息
    const infoId = `${e.target.value}Info`;
    const infoEl = document.getElementById(infoId);
    if (infoEl) infoEl.style.display = 'block';
  });
});
</script>

关键注意事项

1. 未选中处理：始终检查querySelector(':checked')是否返回null
2. 默认选中：添加checked属性 <input type="radio" checked>
3. 分组互斥：确保同组单选框的name值完全相同
4. 移动端适配：使用<label>包裹单选框提升点击区域

实际应用场景

1. 订单支付方式选择（支付宝/微信/银行卡）
2. 问卷调查中的单选问题
3. 设置页面的选项切换（如主题颜色）
4. 筛选器条件选择（如价格排序）

最佳实践建议

• 可访问性：为<label>添加for属性关联单选框ID
• 性能优化：事件委托代替单个监听
• 框架方案：Vue使用v-model/React使用useState绑定值
• 防错机制：提供默认选项避免空提交

引用说明：本文内容参考MDN Web Docs的HTML Radio Button指南及W3C无障碍标准，代码示例经过Chrome/Firefox/Edge多浏览器测试,符合现代Web标准。