在HTML中，通过JavaScript监听单选框的change事件，使用document.querySelector获取选中值，结合if/switch语句实现条件判断，根据选项执行不同操作。
在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>
关键注意事项
- 未选中处理：始终检查
querySelector(':checked')是否返回null - 默认选中：添加
checked属性<input type="radio" checked> - 分组互斥：确保同组单选框的
name值完全相同 - 移动端适配：使用
<label>包裹单选框提升点击区域
实际应用场景
- 订单支付方式选择（支付宝/微信/银行卡）
- 问卷调查中的单选问题
- 设置页面的选项切换（如主题颜色）
- 筛选器条件选择（如价格排序）
最佳实践建议
- 可访问性：为
<label>添加for属性关联单选框ID - 性能优化：事件委托代替单个监听
- 框架方案：Vue使用
v-model/React使用useState绑定值 - 防错机制：提供默认选项避免空提交
引用说明：本文内容参考MDN Web Docs的HTML Radio Button指南及W3C无障碍标准，代码示例经过Chrome/Firefox/Edge多浏览器测试,符合现代Web标准。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/40100.html
