单选按钮组互斥的关键是 name 属性相同且仅一个含 checked；label 必须正确绑定以扩大点击区域；获取选中值推荐 queryselector('input[name="xxx"]:checked')。
单选按钮组必须用相同的 name 属性才能互斥
浏览器只认 name 相同的 <input type="radio"> 为一组，点击时才会自动取消其他选项。如果漏写或拼错 name，看起来像单选，实际能多选——这是最常被忽略的根源。
实操建议：
-
name值建议用语义化小写英文，比如user_gender、payment_method - 每个
<input>必须配一个<label></label>，且用for属性绑定id，否则点文字无法触发（移动端尤其明显） - 不要用
id或class判断是否为一组，它们只影响样式或 JS 查询，不参与浏览器原生单选逻辑
设置默认选中项用 checked，别靠 JS 模拟
原生 checked 属性是声明式的，页面加载即生效，且能被表单重置（<input type="reset">）正确还原。用 JS 设置 element.checked = true 只是运行时状态，不改变 HTML 结构，重置后会丢失。
常见错误现象：页面刷新后默认选项没亮，或点了重置按钮却没回到初始状态。
实操建议：
- 在 HTML 中直接写
checked（无值），如<input type="radio" name="theme" value="dark" checked> - 若需动态设默认值，优先在服务端渲染时注入
checked，而非等 DOM 加载完再 JS 操作 - 多个
checked同时存在？浏览器只认第一个，后面的会被忽略——所以确保只有一个带checked
获取当前选中的值要用 document.querySelector 配合属性选择器
不能遍历所有 radio 手动判断 checked，太冗余；也不该监听每个 radio 的 click，容易重复绑定。现代写法是用 CSS 选择器一次定位。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
使用场景：表单提交前校验、选项切换后更新 UI、联动其他控件。
实操建议：
- 用
document.querySelector('input[name="plan"]:checked')获取当前选中的元素，返回null表示没选 - 取值时链式调用：
document.querySelector('input[name="plan"]:checked')?.value（可选链防报错） - 监听切换事件，统一挂到父容器上（事件委托），比给每个 radio 绑
change更轻量：form.addEventListener('change', e => { if (e.target.name === 'plan') {...} })
移动端点击区域小？用 <label></label> 包裹 input 或设 min-height
原生 radio 在 iOS 和部分安卓机型上点击热区极小（仅圆点本身），用户点中文字却没反应，误以为失效。这不是 bug，是浏览器默认样式限制。
性能与兼容性影响：包裹 <label></label> 是零成本修复，无需 JS；CSS 方案要注意 pointer-events: none 等误操作可能让点击失效。
实操建议：
- 推荐写法：
<label><input type="radio" name="size" value="m"> 中号</label>（隐式关联，最简） - 若需分离结构，显式用
for/id，并给<label></label>加display: block和padding - 避免对
input[type="radio"]直接设宽高或背景——它会被隐藏，样式应作用于<label></label>或伪元素
name 和 checked 这两个属性；其余交互和体验问题，90% 出在 <label></label> 没配好或事件监听方式太重。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
