本教程详细介绍了如何使用javascript和jquery在用户点击单选按钮时，实时获取其选中值。文章通过具体代码示例，演示了如何监听单选按钮的点击事件，并利用事件对象或`this`关键字准确捕获所选按钮的`value`属性，同时提供了纯javascript和jquery两种实现方式，并强调了相关注意事项，旨在帮助开发者高效地处理表单交互。
引言
单选按钮（Radio Button）是网页表单中常用的一种交互元素，允许用户从一组互斥的选项中选择一个。在实际应用中，我们经常需要获取用户选择的单选按钮的值，以便进行后续的数据处理或逻辑判断。本教程将详细讲解如何通过JavaScript（包括jQuery）来监听单选按钮的点击事件，并准确获取其选中值。
HTML结构示例
在开始讲解JavaScript代码之前，我们先来看一个典型的单选按钮组的HTML结构。以下是一个使用Bootstrap样式构建的评分单选按钮组：
<div class="d-flex justify-content-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
<label class="form-check-label" for="inlineRadio1">5 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
<label class="form-check-label" for="inlineRadio2">4 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
<label class="form-check-label" for="inlineRadio3">3 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
<label class="form-check-label" for="inlineRadio4">2 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
<label class="form-check-label" for="inlineRadio5">1 star</label>
</div>
</div>关键点解析：
- type="radio": 定义这是一个单选按钮。
- name="inlineRadioOptions": 同一组单选按钮必须拥有相同的name属性。这是浏览器实现互斥选择的关键。
- id: 每个单选按钮应有唯一的id，用于label标签的for属性，以提高可访问性。
- value: 这是当该单选按钮被选中时，我们希望获取的实际值。
方法一：使用jQuery监听点击事件获取选中值
jQuery提供了一种简洁高效的方式来处理DOM事件。通过选择器，我们可以轻松地为所有单选按钮绑定点击事件。
立即学习“Java免费学习笔记（深入）”；
漂亮jQuery单选框/复选框美化插件Labelauty.js?1.1.2
下载
漂亮jQuery单选框/复选框美化插件Labelauty.js，支持自定义灰色按钮不可点、支持input控件定义选项直接提交后端即可获取数据还是非常方便的单选框/多选框美化JS插件，特别是在手机端使用，还是非常 适用的。
示例代码
首先，确保你的页面中已引入jQuery库。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery获取单选按钮值</title>
<!-- 引入Bootstrap CSS，如果需要的话 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h3>请选择您的评分：</h3>
<div class="d-flex justify-content-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
<label class="form-check-label" for="inlineRadio1">5 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
<label class="form-check-label" for="inlineRadio2">4 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
<label class="form-check-label" for="inlineRadio3">3 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
<label class="form-check-label" for="inlineRadio4">2 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
<label class="form-check-label" for="inlineRadio5">1 star</label>
</div>
</div>
<p class="mt-3">当前选中的评分：<span id="selectedValue">无</span></p>
</div>
<!-- 引入jQuery库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 监听所有name为'inlineRadioOptions'的单选按钮的点击事件
$('input[name="inlineRadioOptions"]').on('click', function() {
// 'this' 关键字指向当前被点击的DOM元素
var selectedValue = $(this).val(); // 使用jQuery的.val()方法获取值
console.log("您选择了：" + selectedValue + " 星");
$('#selectedValue').text(selectedValue + " 星");
});
});
</script>
</body>
</html>代码解析
- $(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）来实现相同的功能。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯JavaScript获取单选按钮值</title>
<!-- 引入Bootstrap CSS，如果需要的话 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h3>请选择您的评分：</h3>
<div class="d-flex justify-content-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptionsJS" id="inlineRadioJS1" value="5">
<label class="form-check-label" for="inlineRadioJS1">5 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptionsJS" id="inlineRadioJS2" value="4">
<label class="form-check-label" for="inlineRadioJS2">4 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptionsJS" id="inlineRadioJS3" value="3">
<label class="form-check-label" for="inlineRadioJS3">3 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptionsJS" id="inlineRadioJS4" value="2">
<label class="form-check-label" for="inlineRadioJS4">2 stars</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptionsJS" id="inlineRadioJS5" value="1">
<label class="form-check-label" for="inlineRadioJS5">1 star</label>
</div>
</div>
<p class="mt-3">当前选中的评分：<span id="selectedValueJS">无</span></p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取所有name为'inlineRadioOptionsJS'的单选按钮
var radioButtons = document.querySelectorAll('input[name="inlineRadioOptionsJS"]');
// 遍历所有单选按钮，并为每个按钮添加事件监听器
radioButtons.forEach(function(radio) {
radio.addEventListener('click', function(event) {
// event.target 指向当前被点击的DOM元素
var selectedValue = event.target.value;
console.log("您选择了：" + selectedValue + " 星 (纯JS)");
document.getElementById('selectedValueJS').textContent = selectedValue + " 星";
});
});
});
</script>
</body>
</html>代码解析
- 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属性。通过本教程提供的代码示例和最佳实践，开发者可以高效准确地实现这一功能，从而构建更加动态和响应式的用户界面。
