本文详解在多个单选按钮共享同一 name 属性时，如何准确获取用户实际选中的那个按钮的 value 值，避免始终返回首个选项的常见错误。
本文详解在多个单选按钮共享同一 `name` 属性时，如何准确获取用户实际选中的那个按钮的 `value` 值，避免始终返回首个选项的常见错误。
在 HTML 表单中，单选按钮组（radio group）通过相同的 name 属性实现互斥选择，但这也带来一个常见误区：直接使用 document.querySelector('input[name=...') 会始终匹配第一个匹配元素（无论是否被选中），导致 value 恒为 "axes" —— 正如你在控制台中观察到的问题。
要正确获取当前选中的 radio 值，关键在于筛选出 checked === true 的那个元素。以下是两种推荐方案（原生 JavaScript 和 jQuery），均经过实践验证：
✅ 方案一：原生 JavaScript（推荐，无依赖）
$('#guardar_grafico').click(function() {
const selectedRadio = document.querySelector('input[name="sel_graph"]:checked');
const graph_selector = selectedRadio ? selectedRadio.value : null;
console.log(graph_selector); // 输出 'axes'、'activity' 或 'pie'，或 null（未选中时）
});
? 提示：:checked 是 CSS 伪类，querySelector 可直接利用它精准定位已选中的 radio，简洁高效且兼容性好（IE9+）。
✅ 方案二：jQuery 写法（若项目已引入 jQuery）
$('#guardar_grafico').click(function() {
const graph_selector = $('input[name="sel_graph"]:checked').val();
console.log(graph_selector); // 同样返回对应 value 或 undefined
});
⚠️ 注意事项
-
务必检查返回值有效性：用户可能尚未选择任何选项，此时 :checked 匹配结果为空，.value 或 .val() 将返回 null 或 undefined。建议添加空值判断：
if (!graph_selector) { alert('请先选择一种图表类型！'); return; } - 不要用 querySelectorAll(...)[0].value：这会忽略 checked 状态，永远取第一个 DOM 元素的值。
- 确保 for 属性与 id 严格对应：你的 HTML 中
掌握这一模式后，你不仅能解决当前图表类型选择问题，还能复用于所有单选按钮组的值获取场景——核心原则始终是：以 :checked 为筛选依据，而非顺序或索引。
