单选按钮和复选框正常工作的关键是name属性一致且type值正确；name决定单选互斥组，value决定提交值，label包裹提升可访问性，JS获取需判空并手动触发change事件。
单选按钮和复选框能正常互斥或独立选中，关键就两点：name 属性写对、type 值别写错。其他看似可选的细节（比如 label 包裹、id/for 配对、value 设置），漏掉一个就可能在表单提交、JS 获取或移动端点击时出问题。
单选按钮必须用相同的 name 才算“一组”
浏览器只靠 name 判断哪些 input[type="radio"] 属于同一组。如果漏写 name，或两组用了同一个 name（比如性别和婚姻状况都叫 status），就会出现“点了男还能点已婚”或“点了男就自动取消未婚”这种反直觉行为。
-
name值必须完全一致（区分大小写），且不能为空 - 每组单选应使用语义化名称，如
gender、payment_method - 务必为每个
radio设置value，否则提交时拿到的是空字符串或on - 用
checked指定默认项，但同一组里只能有一个带该属性
复选框的 name 可以相同，但后端接收方式不同
复选框天然支持多选，name 相同只是方便批量处理；但服务端能否正确解析为数组，取决于 name 写法和后端框架。PHP 习惯加 []（如 hobby[]），而 Node.js/Python 通常靠请求体解析逻辑决定，不强制要求方括号。
- 若用
name="hobby"，多数后端只收到最后一个勾选项的value - 若用
name="hobby[]"，PHP 会自动转成数组；其他语言需手动解析同名参数列表 - 每个
checkbox也应有value，否则勾选后提交值是on -
checked可多处使用，没有互斥限制
不包 label 就等于放弃可访问性和触控体验
直接写 <input type="radio">男 看似省事，但用户只能精准点击那个小圆圈——在手机上几乎点不中。用 label 包裹或用 for 关联，能让整个文字区域响应点击，同时屏幕阅读器也能正确读出选项含义。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<label><input type="radio" name="gender" value="male">男</label> - 若需分离结构，用
id+for：<input id="male" type="radio" name="gender" value="male"><label for="male">男</label> - 避免
label里嵌套多个input，会导致语义混乱
JS 动态操作时，别只查 checked 状态
用 JS 获取单选组当前值，不能只遍历所有 radio 然后找 checked === true —— 如果用户还没点过任何一项，所有都是 false，你得知道这是“未选择”还是“默认项被清空”。更稳妥的方式是先查 DOM 中是否有 checked，再 fallback 到初始 checked 属性或预设默认值。
- 获取单选值：
document.querySelector('input[name="gender"]:checked')?.value - 设置单选值：
document.querySelector('input[value="female"][name="gender"]').checked = true - 复选框批量取值：
[...document.querySelectorAll('input[name="hobby[]"]:checked')].map(el => el.value) - 注意：动态设置
checked后，change事件不会自动触发，需手动dispatchEvent
最容易被忽略的其实是 value —— 很多人留空或写死 "true"，结果后端收不到有意义的数据。它不是装饰属性，而是表单提交时真正发送的字段值。
