单选按钮没有“激活”状态，只有checked（选中）和未选中两种状态；所谓“激活”实为用户点击后触发的视觉反馈或逻辑响应，需同name分组、至少一个默认checked、用change事件监听切换。
单选按钮怎么才算“被激活”
单选按钮（<input type="radio">）本身没有“激活”状态，只有 checked（选中）和未选中两种状态。所谓“激活”，实际是指用户点击后触发的视觉反馈或逻辑响应——比如高亮、联动其他控件、提交时生效。关键在于：它必须属于同一 name 组，且至少有一个默认 checked，否则整个组在表单提交时值为空。
确保单选组能正常工作必须做的三件事
常见错误是点了没反应、无法取消再选、或提交时拿不到值。根源往往出在基础配置上：
-
name属性必须完全一致（大小写敏感），否则浏览器视为不同组 - 至少一个
input带checked属性（如<input type="radio" name="theme" value="dark" checked>），否则初始状态全未选，且首次点击后无法取消 - 不要用
id或class替代name来分组——CSS 和 JS 可以用它们，但浏览器只认name
用 JavaScript 捕获“被选中”事件的正确写法
别监听 click，而要用 change。因为 click 在已选中的按钮上也会触发，但值没变；change 只在真正切换选项时发生。
<input type="radio" name="size" value="m" id="size-m"><input type="radio" name="size" value="l" id="size-l"><script>
document.querySelectorAll('input[name="size"]').forEach(radio => {
radio.addEventListener('change', function() {
if (this.checked) {
console.log('选中了：', this.value); // 只在真正切换时执行
}
});
});
</script>
注意：this.checked 在 change 回调里一定为 true，但显式判断更稳妥；避免用 radio.checked === true，因为属性可能不存在（未设 checked 时返回 undefined）。
样式控制“视觉激活”的常见坑
原生 <input type="radio"> 的外观不能直接用 CSS 改边框或背景色。想自定义“激活态”外观，必须借助 :checked 伪类 + 隐藏原生控件 + 用 label 关联：
<input type="radio" name="color" value="red" id="color-red"><label for="color-red">红色</label>
<style>
input[type="radio"] { display: none; }
input[type="radio"]:checked + label {
background: #007bff;
color: white;
padding: 4px 12px;
border-radius: 4px;
}
</style>
容易漏掉的点：for 和 id 必须严格匹配；display: none 后仍要保留 name 和 value，否则表单提交失效；若用 <label><input>文本</label> 结构，则用 input:checked ~ span 这类兄弟选择器，但兼容性略低。
真实项目里，“激活”常涉及状态同步——比如选中某个 radio 后禁用另一组输入框。这种逻辑不靠 HTML 自身，得靠 JS 监听 change 并手动操作 DOM，而且要注意初始状态是否已按 checked 渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
