HTML单选按钮组表单提交值获取与校验-html教程-PHP中文网

单选按钮组必须使用完全相同的name属性（区分大小写）才能实现互斥选择，否则表单提交时可能缺失字段；需用:checked伪类获取选中值，手动校验必填并设默认checked项以防字段静默缺失。

html单选按钮组表单提交值获取与校验

单选按钮组的 name 属性必须一致才能互斥

浏览器只认 name 相同的 <input type="radio"> 为一组，否则无法实现“选一个、取消另一个”的行为。如果漏写或拼错 name，表单提交时只会传入最后勾选的那个（甚至可能一个都不传）。

常见错误现象：console.log(formData.get('gender')) 返回 null，但 HTML 里明明写了三个 radio；检查后发现两个写的是 name="sex"，一个是 name="gender"。

所有同组 radio 必须用完全相同的 name 字符串（区分大小写）
建议在 <fieldset></fieldset> 中包裹，并配 <legend></legend> 提升可访问性
服务端接收时，也按这个 name 键名取值，例如 PHP 的 $_POST['gender']，Node.js 的 req.body.gender

JavaScript 获取选中值要用 querySelector + checked

document.querySelectorAll('input[name="gender"]') 拿到的是 NodeList，不能直接取值；必须遍历判断 checked 状态，或者更简洁地用 querySelector 找第一个已勾选的。

示例：

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

注意：如果用户没选任何一项，selected 是 null，直接访问 .value 会报 Cannot read property 'value' of null。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

不要用 getElementById —— 每个 radio 应该有不同 id（用于 <label for="xxx"></label>），不是靠 id 区分组
不要用 form.elements['gender'] 然后遍历 —— 冗余且易错，:checked 伪类更直观
若需监听变化，绑定 change 事件到整个组的父容器，比每个 radio 单独绑更轻量

表单提交前校验 radio 是否有值很关键

HTML5 的 required 属性对 radio 组有效，但仅当整个组没有一项被勾选时才触发提示。问题在于：如果页面加载后默认没设 checked，用户又跳过该区域，提交时浏览器弹原生提示，但样式不可控，且部分老浏览器不支持。

更稳妥的做法是手动校验：

function validateRadio(name) {
  return document.querySelector(`input[name="${name}"]:checked`) !== null;
}
// 使用
if (!validateRadio('gender')) {
  alert('请选择性别');
  return false;
}