单选按钮组的name属性必须一致才能实现互斥选择，否则用户可同时选中多个；获取选中值需用queryselector+':checked'定位并判空；提交时未选则字段不发送，需前后端校验；可用localstorage持久化选择结果。
单选按钮组的 name 属性必须一致
浏览器靠 name 属性识别一组单选按钮（<input type="radio">）是否互斥。如果漏写或写错 name，用户就能同时选中多个——看起来像“没保存”，其实是根本没形成有效单选组。
常见错误：
• 拼写不一致（如 gender 和 gendre）
• 混用大小写（Category vs category）
• 动态生成时未统一赋值（比如 Vue/React 中 key 或 name 绑定出错）
正确写法示例：
<input type="radio" name="payment" value="credit"> 信用卡<br><input type="radio" name="payment" value="alipay"> 支付宝<br><input type="radio" name="payment" value="wechat"> 微信支付
获取选中值要用 querySelector + :checked
不能直接读 value，因为所有按钮都有 value，但只有被选中的那个才真正“生效”。得先定位到被勾选的那个节点，再取它的 value。
推荐写法（原生 JS）：
const selected = document.querySelector('input[name="payment"]:checked');<br>if (selected) {<br> console.log(selected.value); // 如 "alipay"<br>} else {<br> console.log('未选择任何选项');<br>}
注意点：
• querySelector 只返回第一个匹配项，刚好符合单选逻辑
• 如果没有选项被选中，返回 null，必须判空
• 不要用 getElementsByName 配合循环——多此一举且易漏判
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
表单提交时 value 值自动发送，但需防空提交
当单选按钮组作为 <form></form> 的一部分提交时，只要有一个被选中，对应 name=value 就会作为表单数据发出；但如果全都没选，这个字段根本不会出现在提交数据里——后端可能收不到该字段，导致逻辑异常（比如误判为“未填写”）。
稳妥做法：
• 前端提交前校验：document.querySelector('input[name="payment"]:checked') 是否存在
• 后端不要依赖该字段“一定存在”，要处理缺失情况
• 若业务上必须有默认值，可在 HTML 中加 checked 属性（如第一个选项设为默认）
用 localStorage 持久化选择结果
用户刷新页面后，单选按钮会重置为初始状态。若想恢复上次选择，得手动存取 localStorage。
监听并保存：
document.querySelectorAll('input[name="payment"]').forEach(radio => {<br> radio.addEventListener('change', () => {<br> const selected = document.querySelector('input[name="payment"]:checked');<br> if (selected) localStorage.setItem('payment', selected.value);<br> });<br><p>页面加载时恢复：</p>
<pre class="brush:php;toolbar:false;">const saved = localStorage.getItem('payment');<br>if (saved) {<br> const target = document.querySelector(`input[name="payment"][value="${saved}"]`);<br> if (target) target.checked = true;<br>}
关键细节：
• 必须在 DOM 加载完成后再执行恢复逻辑（如放在 DOMContentLoaded 里）
• localStorage 存的是字符串，value 本身也是字符串，无需额外转换
• 不要存整个 DOM 节点或函数，只存原始值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
