能，单选按钮分组仅依赖name属性是否相同，与是否嵌套在form标签内无关；name值需完全一致（大小写敏感），配合label可扩大点击区域，JS获取选中值时需判空避免报错。
单选按钮不套 form 标签还能分组吗？能，靠 name 属性
能。HTML 单选按钮（<input type="radio">）的分组逻辑完全由 name 属性决定，和是否包裹在 form 里毫无关系。只要多个 radio 具有相同的 name 值，它们就自动互斥——选一个，其他同名的自动取消。
常见错误是以为必须写 form 才能“提交”或“分组”，其实分组是浏览器原生行为，提交才是 form 的事。脱离 form 后，你只是放弃默认提交能力，但交互逻辑照常工作。
-
name值必须完全一致（大小写敏感），比如name="color"和name="Color"是两组 - 建议给每组加一个
id唯一标识，方便后续 JS 操作或关联label - 不要漏掉
value—— 它是选中时实际传递/读取的值，空字符串或缺失会导致 JS 获取时为""或undefined
怎么用 label 提升可点击区域又不破坏分组
直接点击 radio 小圆圈太难，用 label 包裹或通过 for 关联是标准做法，且完全不影响分组逻辑。
两种写法都有效：
立即学习“前端免费学习笔记（深入）”；
<input type="radio" name="theme" value="dark" id="theme-dark"> <label for="theme-dark">深色模式</label> <label> <input type="radio" name="theme" value="light"> 浅色模式 </label>
注意点：
- 用
for时，label的for值必须严格等于对应input的id - 嵌套写法里，
input不能有id也没关系，但必须在同一个label内部 - 别给同一组 radio 设置不同
name，哪怕只是拼写差异（如多一个空格），就会变成独立控件
JS 读取当前选中值时容易踩的坑
没 form 不代表 JS 不能获取——只是得手动查 DOM。最简方式是用 document.querySelector 配合属性选择器。
例如获取 name="size" 这组的选中值：
const selected = document.querySelector('input[name="size"]:checked');
const value = selected ? selected.value : null;
关键陷阱：
- 如果没人选中，
querySelector(...:checked)返回null，直接访问.value会报Cannot read property 'value' of null - 别用
document.getElementsByName("size")然后遍历——它返回的是HTMLCollection，不是数组，不能直接用find；得先转数组或用Array.from() - 如果页面有多个同名 radio 组（比如不同模块都用了
name="status"），上面的选择器会命中第一个匹配项，需加更具体的上下文限定（如加 class 或父容器 id）
为什么有时候点击没反应？检查这三点
单选分组失效，90% 是这三个地方出问题：
-
name拼写不一致：复制粘贴时多空格、中英文引号、大小写混用（"category"vs"Category"） -
type="radio"写成type="button"或漏写type（默认是text） - CSS 无意中设置了
pointer-events: none或opacity: 0覆盖了控件，表面看能点，实际事件没触发
真遇到“点了没变化”，打开开发者工具，选中任意一个 radio，看 Elements 面板里它的 name 和其他兄弟是否真的一致，再手动在控制台执行 document.querySelectorAll('input[name="xxx"]') 数一数数量对不对。
