HTML表单提交中如何获取单选按钮的自定义属性值-html教程-PHP中文网

单选按钮需同name才互斥，获取自定义属性须用queryselector找:checked元素再读dataset或getattribute；change事件监听最稳妥，submit时需手动同步隐藏字段。

html表单提交中如何获取单选按钮的自定义属性值

单选按钮 `name` 相同才能互斥，但获取值必须靠 `checked`

HTML 表单里，多个 <input type="radio"> 要构成一组单选，必须共享同一个 name 属性。但它们的 value 通常只用于提交，如果你在 DOM 上额外加了自定义属性（比如 data-id、data-type），浏览器**不会自动把它们随表单提交**，也不会出现在 event.target.value 里。

所以不能只监听 change 然后读 event.target.value —— 那只是 value 属性的值，不是你挂的 data-*。

先用 document.querySelector('input[name="xxx"]:checked') 找到当前选中的那个元素
再调用 .dataset.xxx 或 .getAttribute('data-xxx') 拿自定义属性
如果没找到匹配的已选中项（比如初始无默认选中），querySelector 返回 null，记得判空

`addEventListener('change')` 是最稳妥的监听时机

别用 click：用户用键盘空格切换时可能不触发；也别依赖表单 submit 时才读取——万一校验失败要提前反馈，就得即时拿到自定义属性。

示例：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

用 `getAttribute()` 比 `dataset` 更兼容旧写法

dataset 只能读 data- 开头且含连字符转驼峰的属性（如 data-user-id → dataset.userId），但如果你写了 data_ID 或 DATA-ID，dataset 就拿不到。而 getAttribute('data-ID') 大小写和连字符都原样匹配。

推荐统一用小写+连字符命名，然后优先用 dataset.xxx
如果属性名不规范（比如来自模板引擎动态插入、或历史遗留），改用 selected.getAttribute('data-whatever')
getAttribute 返回字符串或 null；dataset 对不存在的 key 返回空字符串，这点行为不一致

表单提交前手动补全隐藏字段是常见兜底方案

如果后端非要你在 POST 数据里看到 plan_id 和 plan_price，而不是只靠 plan=pro，那就不能只靠原生提交。得在提交前把自定义属性值塞进隐藏字段：

<input type="hidden" name="plan_id" id="planId"><input type="hidden" name="plan_price" id="planPrice"><p><script>
document.getElementById('myForm').addEventListener('submit', (e) => {
const selected = document.querySelector('input[name="plan"]:checked');
if (selected) {
document.getElementById('planId').value = selected.dataset.id;
document.getElementById('planPrice').value = selected.dataset.price;
}
});
</script></p>

注意：这个逻辑必须在 submit 事件里做，不能只在 change 里设——因为用户可能跳过选择直接点提交，此时隐藏字段还是空的。

容易被忽略的是：如果单选组允许“不选任何一项”，那 :checked 查不到节点，所有基于它的读取都会失效，得提前设计默认值或校验逻辑。