JavaScript/jQuery：获取用户选中的单选按钮值-js教程-PHP中文网

JavaScript/jQuery：获取用户选中的单选按钮值

本教程详细介绍了如何使用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免费学习笔记（深入）”；

讯飞绘文

讯飞绘文：免费AI写作/AI生成文章

118

查看详情

示例代码

首先，确保你的页面中已引入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。