HTML单选按钮组怎么与表单一起提交-html教程-PHP中文网

单选按钮必须name属性相同才能互斥，提交时仅发送选中项的value值；需设默认checked项，用queryselector('input[name="x"]:checked')获取值，required属性需配合默认选中才可靠生效。

html单选按钮组怎么与表单一起提交

单选按钮 name 属性必须相同才能构成一组

浏览器只把 name 相同的 <input type="radio"> 当作互斥选项。如果漏写 name，或拼写不一致（比如 gender 和 Gender），它们就各自独立，无法实现“选一个”的逻辑，表单提交时也只会发送最后一个被选中的值（甚至一个都不发）。

实操建议：

name 值用小写字母+下划线，比如 user_role、payment_method
每组至少提供一个带 checked 的默认项，避免用户未选择导致该字段缺失
不要用 id 替代 name——id 只用于 DOM 定位或 <label for="xxx"></label> 关联

表单提交时，只有被选中的 radio 会传 value 值

提交后后端收到的不是“是/否”或“男/女”，而是你写的 value 字符串。比如：<input type="radio" name="status" value="active"> 被选中，后端拿到的就是 status=active，不是 status=on 或 true。

常见错误现象：

后端收不到该字段：检查是否所有 radio 都没被选中，且没设 checked
后端收到空字符串：检查 value 是否为空（value=""）或写了空格（value=" "）
PHP 中用 $_POST['xxx'] 取值，但字段名写错或大小写不匹配

用 JavaScript 获取当前选中的 radio 值

不能直接对整个组调用 .value，必须先找到被选中的那个元素。原生写法简洁可靠：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

const selected = document.querySelector('input[name="theme"]:checked');
const themeValue = selected ? selected.value : null;

注意点：

:checked 伪类只匹配当前被选中的元素；如果没有选中项，querySelector 返回 null
别用 document.getElementsByName("xxx") 然后遍历——效率低，且容易忽略未选中情况
如果用 jQuery，$('input[name="xxx"]:checked').val() 是等效写法，但现代项目优先推荐原生

提交前校验 radio 是否有选中项

HTML5 的 required 属性对 radio 组有效，但只在**整个组至少有一个 checked 或用户手动选中过**时才起作用。如果页面加载后用户没碰过任何 radio，又没设默认 checked，required 不会阻止提交。

稳妥做法是手动校验：

function validateRadio(name) {
  return !!document.querySelector(`input[name="${name}"]:checked`);
}
// 使用：if (!validateRadio('delivery')) { alert('请选择配送方式'); }

容易被忽略的地方：