1. 通过原生 JavaScript 获取单选按钮选中值
原生 JavaScript 获取选中值的基本思路
在前端表单中，单选按钮通常通过同名的 input[type="radio"] 元素组成一个分组。name 属性用于分组，value 属性用于传递具体的选项值。要判断哪个被选中，应查找 :checked 的输入，然后读取其 value。如果没有选中项，返回 null 或 undefined，视实现而定。
下面给出最常见的两种写法。第一种利用 document.querySelector，第二种使用 getElementsByName 循环遍历。两者在现代浏览器中表现一致，兼容性好。querySelector 更简洁，getElementsByName 更显式。
// 方法1：使用 querySelector
const selected = document.querySelector('input[name="gender"]:checked');
const value = selected ? selected.value : null;
console.log(value);// 方法2：使用 getElementsByName 循环遍历
const radios = document.getElementsByName('gender');
let value2 = null;
for (let i = 0; i < radios.length; i++) {if (radios[i].checked) {value2 = radios[i].value;break;}
}
console.log(value2);
如何在表单提交前获取选中的值
在提交事件的回调中读取选中的值，是实现表单校验和数据收集的常见场景。使用 change 事件 或在提交时即时读取，均可获得正确的结果。阻止默认提交是调试时常用的做法。
通过捕获事件对象的目标元素，可以快速获得当前被选中的值。若要在事件处理函数中得到值，优先使用 event.target.value，它指向触发事件的单选按钮。
document.addEventListener('DOMContentLoaded', function () {const radios = document.querySelectorAll('input[name="gender"]');radios.forEach(radio => radio.addEventListener('change', function (e) {const value = e.target.value;console.log('选中值：', value);}));
});
边界情况与容错处理
当页面初次加载或未选中任何项时，读取 value 可能为 undefined。在实际应用中，最好对返回值进行容错处理，确保后续逻辑不会因为空值而报错。
下面给出一个容错函数，适用于任意同名单选按钮组的取值：返回值或 null，方便后续判断。
function getSelectedValue(groupName) {const radios = document.getElementsByName(groupName);for (let i = 0; i < radios.length; i++) {if (radios[i].checked) {return radios[i].value;}}return null;
}
2. 使用 jQuery 获取单选按钮选中值
基本用法：读取选中项的值
在 jQuery 中，选中项的简写表达非常直观。通过 name=“xxx” 的选择器结合 :checked，就能直接取到选中项的 value。如果没有选中项，返回 undefined，需要在逻辑中做容错处理。
该方式简洁且在快速原型开发中非常有用，适合常见的表单取值场景。为了可维护性，可以把这段逻辑封装成一个小函数。
var value = $('input[name="gender"]:checked').val();表单提交前的取值场景
在提交表单时，读取选中值通常与表单验证配合。借助 事件绑定，可以在提交前就获取并处理该值。阻止默认提交用于调试和演示阶段。
这里展示一个常见的做法：在提交事件中读取选中的值并进行控制流判断。
$('#myForm').on('submit', function (e) {e.preventDefault();var value = $('input[name="gender"]:checked').val();console.log('提交时的选中值：', value);
});
处理没有选中项的容错方式
当没有任何单选按钮被选中时，val() 返回 undefined。使用简单的容错表达式，可以把它映射成一个明确的空值（如 null），避免后续运算报错。
示例：在读取后给值设一个默认值，以便和界面提示逻辑对齐。
var value = $('input[name="gender"]:checked').val() || null;3. 进阶技巧与实战要点
动态生成的单选按钮组的取值
在动态向页面添加单选按钮后，直接使用搜索选择器仍然能得到正确的选中项。若要对新增元素绑定事件，推荐使用事件代理，这样无需在每次元素创建后重新绑定事件。事件委托可确保新元素也能触发相应逻辑。
下面展示一个基于 jQuery 的事件代理示例，监听任意 colorGroup 组内的 change 事件，并读取当前选中的值。
$(document).on('change', 'input[name="colorGroup"]', function () {var value = $('input[name="colorGroup"]:checked').val();console.log('当前选中：', value);
});
与表单校验结合的取值策略
在走表单校验流程时，取值通常需要与验证规则对齐。可以先获选中的值，再通过自定义规则进行判断与提示，确保 UX 连贯。
示例：在提交前取值后再执行自定义校验，若没有选中则提示用户。
var value = $('input[name="option"]:checked').val();
if (value == null) {// 提示用户选择一个选项alert('请至少选择一个选项。');
}
边缘场景：同名组中多组单选按钮的取值
如果页面中存在多组同名的单选按钮，为避免取错值，需要确保分组使用不同的 name 值。通过明确的命名策略，可以快速定位到目标组并读取其选中项。
示例中，genderGroup 与 colorGroup 如果作为两组不同的单选按钮，分别独立读取各自的 value，从而实现多组表单数据的并行提交。
var genderValue = $('input[name="gender"]:checked').val();
var colorValue = $('input[name="colorGroup"]:checked').val();
console.log(genderValue, colorValue);
