当前位置：首页 > 行业动态 > 正文

jquery 获取radio

admin
行业动态
2024-01-18
2408

使用jQuery获取radio按钮的值，可以使用 $('input[type="radio"]:checked').val()方法。

在网页开发中，我们经常需要获取radio按钮的值，jQuery是一个快速、简洁的JavaScript库，它可以帮助我们轻松地实现这一目标，本文将详细介绍如何使用jQuery获取radio的值。

jquery 获取radio 第1张

基本概念

1、radio按钮：radio按钮是一种表单元素，用于让用户从一组选项中选择一个，一个radio组中的每个选项都有一个唯一的name属性，而用户只能选择其中一个选项。

2、jQuery：jQuery是一个JavaScript库，它简化了HTML文档遍历、事件处理、动画和AJAX交互等操作，通过使用jQuery，我们可以更快速、更简洁地编写JavaScript代码。

获取radio的值

要使用jQuery获取radio的值，我们需要先选中包含radio按钮的元素，然后使用val()方法获取选中的值，以下是一个简单的示例：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery获取radio值示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form>
        <input type="radio" name="gender" value="male"> 男
        <input type="radio" name="gender" value="female"> 女
        <button type="button" id="getValue">获取值</button>
    </form>
    <script>
        $(document).ready(function(){
            $("getValue").click(function(){
                var gender = $("input[name='gender']:checked").val();
                alert("选中的值为：" + gender);
            });
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个包含两个radio按钮的表单，当用户点击“获取值”按钮时，我们使用jQuery选中名为“gender”的radio组，并使用val()方法获取选中的值，我们使用alert()函数显示选中的值。