单选按钮需同name才互斥，获取自定义属性须用querySelector找:checked元素再读dataset或getAttribute；change事件监听最稳妥，submit时需手动同步隐藏字段。
单选按钮 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 时才读取——万一校验失败要提前反馈，就得即时拿到自定义属性。
示例：
立即学习“前端免费学习笔记（深入）”；
<form id="myForm">
<input type="radio" name="plan" value="basic" data-id="101" data-price="9.99"> 基础版
<input type="radio" name="plan" value="pro" data-id="102" data-price="29.99"> 专业版
</form>
<p><script>
document.querySelectorAll('input[name="plan"]').forEach(radio => {
radio.addEventListener('change', () => {
const selected = document.querySelector('input[name="plan"]:checked');
if (selected) {
console.log('ID:', selected.dataset.id); // <-- "101" 或 "102"
console.log('Price:', selected.dataset.price); // <-- "9.99" 或 "29.99"
}
});
});
</script>用 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>注意：这个逻辑必须在 submit 事件里做，不能只在 change 里设——因为用户可能跳过选择直接点提交，此时隐藏字段还是空的。
容易被忽略的是：如果单选组允许“不选任何一项”，那 :checked 查不到节点，所有基于它的读取都会失效，得提前设计默认值或校验逻辑。
