本教程详细介绍了如何使用javascript和jquery在用户点击单选按钮时，实时获取其选中值。文章通过具体代码示例，演示了如何监听单选按钮的点击事件，并利用事件对象或`this`关键字准确捕获所选按钮的`value`属性，同时提供了纯javascript和jquery两种实现方式，并强调了相关注意事项，旨在帮助开发者高效地处理表单交互。
引言
单选按钮（Radio Button）是网页表单中常用的一种交互元素，允许用户从一组互斥的选项中选择一个。在实际应用中，我们经常需要获取用户选择的单选按钮的值，以便进行后续的数据处理或逻辑判断。本教程将详细讲解如何通过JavaScript（包括jQuery）来监听单选按钮的点击事件，并准确获取其选中值。
HTML结构示例
在开始讲解JavaScript代码之前，我们先来看一个典型的单选按钮组的HTML结构。以下是一个使用Bootstrap样式构建的评分单选按钮组：
关键点解析：
- type="radio": 定义这是一个单选按钮。
- name="inlineRadioOptions": 同一组单选按钮必须拥有相同的name属性。这是浏览器实现互斥选择的关键。
- id: 每个单选按钮应有唯一的id，用于label标签的for属性，以提高可访问性。
- value: 这是当该单选按钮被选中时，我们希望获取的实际值。
方法一：使用jQuery监听点击事件获取选中值
jQuery提供了一种简洁高效的方式来处理DOM事件。通过选择器，我们可以轻松地为所有单选按钮绑定点击事件。
示例代码
首先，确保你的页面中已引入jQuery库。
jQuery获取单选按钮值
请选择您的评分：
当前选中的评分：无
代码解析
- $(document).ready(function() { ... });: 确保DOM完全加载后再执行JavaScript代码。
- $('input[name="inlineRadioOptions"]'): 这是一个jQuery选择器，用于选中所有name属性为inlineRadioOptions的input元素，即我们的单选按钮组。
- .on('click', function() { ... });: 为选中的所有元素绑定一个click事件监听器。当任何一个单选按钮被点击时，回调函数就会执行。
- $(this).val(): 在事件回调函数内部，this关键字指向当前被点击的DOM元素（即触发事件的那个单选按钮）。$(this)将其封装成jQuery对象，然后使用.val()方法获取其value属性值。
方法二：使用纯JavaScript监听点击事件获取选中值
对于不使用jQuery的项目，或者希望减少依赖，我们可以使用纯JavaScript（原生JS）来实现相同的功能。
示例代码
纯JavaScript获取单选按钮值
请选择您的评分：
当前选中的评分：无
代码解析
- document.addEventListener('DOMContentLoaded', function() { ... });: 确保DOM加载完成后执行代码，类似于jQuery的$(document).ready()。
- document.querySelectorAll('input[name="inlineRadioOptionsJS"]'): 使用querySelectorAll获取所有匹配选择器的元素。它返回一个NodeList，类似于数组。
- radioButtons.forEach(function(radio) { ... });: 遍历NodeList中的每个单选按钮。
- radio.addEventListener('click', function(event) { ... });: 为每个单选按钮添加click事件监听器。
- event.target.value: 在事件回调函数中，event.target指向触发事件的DOM元素（即被点击的单选按钮），通过.value属性即可获取其值。
获取当前页面上已选中的单选按钮值（非事件触发）
有时，我们可能需要在页面加载后，或者在用户没有点击任何按钮的情况下，获取当前页面上已经选中的单选按钮的值。
示例代码
document.addEventListener('DOMContentLoaded', function() {
// 获取name为'inlineRadioOptions'的单选按钮组中当前被选中的按钮
var selectedRadio = document.querySelector('input[name="inlineRadioOptions"]:checked');
if (selectedRadio) {
console.log("页面加载时已选中的值为：" + selectedRadio.value);
// 可以在这里更新UI或执行其他操作
} else {
console.log("页面加载时没有单选按钮被选中。");
}
// 如果使用jQuery
// var selectedRadioJquery = $('input[name="inlineRadioOptions"]:checked').val();
// if (selectedRadioJquery) {
// console.log("页面加载时已选中的值为 (jQuery)：" + selectedRadioJquery);
// }
});代码解析
- document.querySelector('input[name="inlineRadioOptions"]:checked'): 这是原生JavaScript中一个非常强大的选择器。它会查找name属性为inlineRadioOptions且当前处于checked状态的input元素。querySelector只会返回第一个匹配的元素。
- 如果找到了匹配的元素，selectedRadio将是一个DOM对象，我们可以通过selectedRadio.value获取其值。如果没有找到，selectedRadio将为null。
注意事项与最佳实践
- name属性的重要性: 同一组单选按钮必须拥有相同的name属性，这是它们实现互斥选择的基础。
-
change事件 vs click事件:
- click事件在用户每次点击按钮时触发，即使是点击已选中的按钮。
- change事件只在单选按钮的选中状态发生改变时触发。对于单选按钮，这通常意味着用户从一个选项切换到另一个选项。
- 在大多数情况下，change事件更符合逻辑，因为它只在实际选择发生变化时才响应。但如果你的需求是每次点击都响应（例如，统计点击次数），则click事件更合适。
- 可访问性: 始终使用label标签并将其for属性与对应的input的id关联起来。这使得用户可以点击文本来选择单选按钮，提升用户体验，尤其对使用辅助技术的用户。
-
事件委托: 如果你的单选按钮是动态添加到DOM中的（例如，通过AJAX加载），直接绑定事件可能无效。在这种情况下，可以使用事件委托。将事件监听器绑定到父元素上，然后利用事件冒泡来处理子元素的事件。
- jQuery示例: $(document).on('click', 'input[name="inlineRadioOptions"]', function() { ... });
- 纯JavaScript示例: 在父元素上添加监听器，并在回调中检查event.target。
总结
获取用户选中的单选按钮值是前端开发中的常见需求。无论是使用简洁的jQuery还是灵活的原生JavaScript，核心思想都是监听单选按钮的交互事件，并在事件触发时访问目标元素的value属性。通过本教程提供的代码示例和最佳实践，开发者可以高效准确地实现这一功能，从而构建更加动态和响应式的用户界面。
