1. 使用 document.querySelector 方法获取单选框的值
这是最常用的方法。通过选择器直接获取单选框的值。在一个有多个单选框的情况下，您可以使用 CSS 选择器，只获取被选中的单选框的值。
const selectedValue = document.querySelector('input[name="yourRadioName"]:checked').value;
这里，’yourRadioName’ 是单选框的名称属性，:checked 伪类选择器用于定位被选中的单选框。
2. 使用 document.getElementsByName 方法获取单选框的值
利用这个方法可以获取同名的所有单选框元素，然后通过循环来找出哪个单选框被选中。这种方法对于需要处理多个相同名称的单选框很有用。
const radios = document.getElementsByName('yourRadioName');
let selectedValue;
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedValue = radios[i].value;
break;
}
}
这里以 ‘yourRadioName’ 为例，按照这种方式可以轻松找到被选中的单选框的值。
3. 使用 jQuery 获取单选框的值
如果您的项目中已经引入了 jQuery，可以直接通过 jQuery 的方法获取单选框的值。这种方式既简洁又易于理解。
const selectedValue = $('input[name="yourRadioName"]:checked').val();
使用 jQuery，代码看起来更简单，同时您还可以利用 jQuery 提供的其他工具进行更高级的操作。
4. 使用事件处理程序获取单选框的值
在某些情况下，您可能希望在单选框变化时立即获取其值。您可以为单选框设置事件监听器来实现这一点。
const radios = document.getElementsByName('yourRadioName');
radios.forEach(radio => {
radio.addEventListener('change', () => {
if (radio.checked) {
console.log(radio.value);
}
});
});
通过监听每个单选框的 change 事件，您可以轻松捕获到选中的值。
5. 使用 HTML5 表单 API 获取单选框的值
如果您使用 HTML 表单，可以通过对表单元素进行访问来轻松获取单选框的值。这种方式尤其适合于表单提交时获取数据。
const form = document.querySelector('form');
const selectedValue = [...form.elements['yourRadioName']].find(radio => radio.checked).value;
这种方法利用了结构化的方法来访问表单元素，提供了一种清晰的方式来获取值。
6. 总结和最佳实践
获取单选框的值有多种方法，选择合适的方法可以使代码更简洁、易于维护。在现代的 JavaScript 开发中，建议使用结构化 API 和事件处理来确保用户体验良好。
7. 为什么要获取单选框的值？
获取单选框的值通常用于收集用户输入数据，例如在进行表单验证，或根据用户的选择动态更新页面内容。准确获取选中的值是确保应用程序正常运行的基础。
8. 如何在选择单选框后立即获取值？
可以通过事件监听器来实现。在用户选择单选框时触发 ‘change’ 事件，进而获取其值。这种方式可以让用户体验更加流畅，例如实时更新其他内容。
9. 在没有 jQuery 的环境下如何获取单选框的值？
在纯 JavaScript 中，可以使用 document.querySelector 或 document.getElementsByName 方法来获取单选框的值。这些方法都不需要引入额外的库，非常轻便和高效。
