本文详解在具有相同 name 属性、不同 id 和 value 的单选按钮组中，如何准确获取用户实际选中的值，避免始终返回首个选项的问题，并提供原生 javascript 与 jquery 双方案实现。
本文详解在具有相同 name 属性、不同 id 和 value 的单选按钮组中，如何准确获取用户实际选中的值，避免始终返回首个选项的问题，并提供原生 javascript 与 jquery 双方案实现。
在 Web 表单中，单选按钮（）常用于让用户从互斥选项中选择一项。关键在于：所有属于同一逻辑组的 radio 必须共享相同的 name 属性（如本例中的 name="sel_graph"），而通过 id 和 value 区分个体。但一个常见误区是——直接使用 document.querySelector('input[name=sel_graph]')，该方法仅匹配第一个匹配元素（即 ），无论其是否被选中，因此 value 永远输出 "axes"。
✅ 正确做法是：定位到所有同名 radio 元素，并筛选出其中 checked === true 的那个。
✅ 原生 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"（取决于实际选择）
});? 提示：: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
});jQuery 的 .val() 在作用于 radio 组时会自动返回选中项的值；若无选项被选中，则返回 undefined。
⚠️ 注意事项
-
确保用户至少选择一项：生产环境中建议添加校验逻辑，例如：
if (!graph_selector) { alert('请先选择一种图表类型！'); return; } - 不要遗漏 :checked 伪类：这是区分“所有同名 radio”和“当前选中 radio”的核心。
- id 属性仅用于关联 ；真正起作用的是 name + checked 状态。
- 若使用 querySelectorAll + Array.from + filter（如原答案所示），虽可行但冗余，不推荐在现代浏览器中使用。
掌握这一模式，即可稳健处理任意 radio 组的值读取，为后续图表渲染、表单提交等操作提供准确数据基础。
