如何在jQuery中获取Radio选中的值？

2023-11-19值得一看阅读 193

如何在jQuery中获取Radio选中的值？

jQuery是一个流行的JavaScript库，它使操作文档对象模型（DOM）变得容易。获取Radio选中的值是Web开发中经常遇到的问题，下面我们将详细讲解在jQuery中获取Radio选中的值。

步骤一：为Radio按钮设置相同的name属性

要获取Radio选中的值，首先需要为所有Radio按钮设置相同的name属性。这是因为同一组Radio按钮应该有相同的name属性。例如：

<input type="radio" name="gender" value="male">男

<input type="radio" name="gender" value="female">女

在上面的例子中，两个Radio按钮都有相同的name属性，并且都属于“gender”组。

步骤二：使用jQuery选择器获取选中的Radio按钮

可以使用jQuery选择器获取当前选中的Radio按钮，例如：

var selectedValue = $('input[name=gender]:checked').val();

在上面的例子中，$('input[name=gender]:checked')选择器选择了name属性为“gender”的所有Radio按钮中被选中的那个。

步骤三：使用jQuery的val()函数获取选中的值

使用val()函数即可获取选中的值，例如：

var selectedValue = $('input[name=gender]:checked').val();

在上面的例子中，val()函数返回被选中的Radio按钮的值。

完整示例代码

下面是一个完整的示例代码，演示了如何在jQuery中获取Radio选中的值：

<html>
<head>
    <meta charset="UTF-8">
    <title>获取Radio选中的值</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('button').click(function(){
                var selectedValue = $('input[name=gender]:checked').val();
                alert("您选择的性别是：" + selectedValue);
            });
        });
    </script>
</head>
<body>
    <p>请选择您的性别：</p>
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女
    <br><br>
    <button>确定</button>
</body>
</html>
在上面的代码中，当用户单击“确定”按钮时，页面将显示被选中的Radio按钮的值。

总结
通过设置相同的name属性、使用jQuery选择器和val()函数，我们可以很容易地在jQuery中获取Radio选中的值。同时，在实际开发中，我们还可以根据需要进行进一步的处理，例如在表单提交时验证用户是否选择了Radio按钮。

信息由用户投稿以及用户自行发布，真实性、合法性由发布人负责，涉及到汇款等个人财产或隐私内容时请仔细甄别，注意防骗！如有侵权，请联系：wwwlaoyuwang#126.com(#=@)！我们会第一时间核实处理！

如何在jQuery中获取Radio选中的值？