使用jQuery获取单选按钮radio的选中值

最新推荐文章于 2025-06-25 15:11:44 发布

陈田田

最新推荐文章于 2025-06-25 15:11:44 发布

阅读量3.6w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： JavaScript 前端集结号文章标签：获取单选按钮的值 radio

本文链接：https://blog.youkuaiyun.com/candy_tity/article/details/53423327

前端集结号同时被 2 个专栏收录

61 篇文章

订阅专栏

JavaScript

32 篇文章

订阅专栏

本文介绍了一种使用jQuery获取HTML中被选中的单选按钮值的方法。通过点击按钮触发事件，利用jQuery选择器定位到已选中的单选按钮并读取其值，最后将这个值输出到控制台。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单来说：

var val = $('input[name="sex"]:checked').val();

整体代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>获取单选按钮选中的值</title>
</head>
<body>
<label><input type="radio" name="sex" value="m" checked="checked">男</label>
<label><input type="radio" name="sex" value="f">女</label>
<button>提交</button>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('button').click(function(){
            var val = $('input[name="sex"]:checked').val();
            console.log(val);   
        });
    })
</script>
</body>
</body>
</html>