radio值拼接需手动实现，因浏览器仅按同名name分组提交选中value；前端可用querySelectorAll获取所有选中radio值后join拼接，或由后端按name键解析再组合，避免用hidden input模拟导致的同步与兼容性问题。
radio值拼接前必须确保name属性一致
浏览器只把同名name的当作一组，提交时仅发送被选中的那个value。如果想“拼接”，本质是后端或JS主动收集多个单选组的值再组合——不是HTML原生行为。
常见错误：给不同选项设不同name（如name="color"、name="size"），却指望表单自动合并成color=red&size=xl。这其实没问题，但“拼接”得靠你手动处理。
- 每组单选框必须用相同
name，例如所有颜色选项都用name="color" - 不同维度的单选组要用不同
name，例如name="color"和name="size" - 不要试图用一个
name塞多个值（如name="choice"+ 多个value="red,large"），语义混乱且无法区分维度
用JavaScript手动拼接radio值的可靠写法
如果需要把多个单选组的选中值合成一个字符串（比如"red-xl-2024"），直接读document.querySelectorAll('input[type="radio"]:checked')最稳。
function getRadioValues() {
const checked = document.querySelectorAll('input[type="radio"]:checked');
return Array.from(checked)
.map(el => el.value)
.join('-');
}
// 提交前调用：const payload = getRadioValues(); // 如 "red-xl"
- 用
querySelectorAll比遍历name列表更可靠，避免漏掉动态添加的选项 - 注意：若某组没选中任何项，
el.value不会出现，结果里自然缺失该维度——这是预期行为 - 如果必须补默认值，得单独查每组：
document.querySelector('input[name="color"]:checked')?.value || 'default'
后端接收时按name键名解析更清晰
直接提交表单（不干预序列化），后端收到的是键值对，例如color=red&size=xl&year=2024。此时“拼接”是后端职责，比前端硬拼更灵活。
- PHP用
$_POST['color']、$_POST['size']分别取值，再implode('-', $_POST)（注意过滤空值） - Node.js（Express）中
req.body.color、req.body.size可直接拼接 - 关键点：别在前端把值塞进一个
，否则失去字段语义，校验和修改都变麻烦
避免用hidden input模拟拼接的陷阱
有人用JS监听change，把当前所有radio值拼好写进一个。这看似省事，但容易出错：
- 页面有多个表单时，事件监听可能绑错范围，导致
payload写入错误表单 - 用户快速切换选项，JS异步更新
hidden值可能滞后，提交时仍是旧值 - 禁用JS时整个逻辑失效，表单退化为不可用状态
- 真正该做的是：提交时实时生成，而不是维护一个易过期的中间字段
复杂点在于，radio本身不提供“批量获取”API，每次都要自己筛选checked；最容易被忽略的是未选中组的处理——它不会出现在表单数据里，不代表它不存在，得根据业务决定是跳过、填空还是报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
