jQuery单选框操作全指南：选中、取值、验证与联动-代码号

单选框是表单交互中最基础的组件之一，它限定用户在一组选项中只能选择一个。在注册表单、考试系统、问卷调查等页面中随处可见。jQuery 为单选框的操作提供了简洁的 API，覆盖了选中控制、值获取、验证判断以及显示隐藏联动等常见需求。

下面围绕四个核心操作场景，逐一展开说明。

一、使用 .prop() 控制单选框的选中状态

在 jQuery 中操作单选框的选中状态，应该使用 .prop() 方法，而不是 .attr()。原因在于，checked 是一个属性节点，它的值与实际的勾选状态在动态操作下会脱钩。.prop() 操作的是 DOM 元素的实时属性，能准确反映和改变当前状态。

语法：

// 设为选中
$("元素选择器").prop("checked", true);

// 取消选中
$("元素选择器").prop("checked", false);

示例：页面加载后默认选中一个选项

注册表单里常常需要默认勾选一个性别选项。下面这段代码在页面就绪后，将“男”选项自动设为选中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单选框默认选中 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .container {
            text-align: center;
            margin: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>请选择性别</h3>
        <label><input type="radio" name="gender" id="male"> 男</label>
        <label><input type="radio" name="gender" id="female"> 女</label>
    </div>

    <script>
        $(document).ready(function () {
            // 页面加载后默认选中“男”
            $("#male").prop("checked", true);
        });
    </script>
</body>
</html>

经验提示：早期 jQuery 项目中常能见到用 .attr("checked", true) 来控制单选框的写法。这在动态切换选中时会出问题——第一次点击有效，之后 .attr() 返回的可能仍是原来的值。切换到 .prop() 可以彻底避免这个困扰，这个迁移在 jQuery 1.6 之后就应该完成。

二、通过按钮点击联动控制单选框

有些交互场景下，用户并非直接点击单选框，而是通过按钮来间接设定选项。比如“是否参加活动”用 Yes/No 按钮代替单选框，用户体验更友好。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>按钮联动单选框 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .container {
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>你是否已满 18 周岁？</h3>
        <p>
            <label><input type="radio" name="age" id="yes"> 是</label>
            <label><input type="radio" name="age" id="no"> 否</label>
        </p>
        <p>
            <button class="btn-yes">是</button>
            <button class="btn-no">否</button>
            <button class="btn-reset">重置</button>
        </p>
    </div>

    <script>
        $(document).ready(function () {
            // 点击“是”按钮，选中对应单选框
            $(".btn-yes").click(function () {
                $("#yes").prop("checked", true);
            });
            // 点击“否”按钮，选中对应单选框
            $(".btn-no").click(function () {
                $("#no").prop("checked", true);
            });
            // 点击“重置”按钮，取消所有选中
            $(".btn-reset").click(function () {
                $("#yes").prop("checked", false);
                $("#no").prop("checked", false);
            });
        });
    </script>
</body>
</html>

按钮和单选框的双向绑定模式在问卷类页面里很常见。通过 jQuery 把按钮点击事件转化为单选框状态变更，核心逻辑只有一行 .prop() 调用，清晰可靠。

三、获取被选中单选框的值

拿到用户选了哪个选项，是表单提交时必经的一步。用 :checked 伪类选择器配合 .val() 可以直接获取选中项的值。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>获取单选框值 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .wrapper {
            text-align: center;
            margin: 40px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h3>请选择你想学习的课程</h3>
        <form>
            <label><input type="radio" name="course" value="JavaScript"> JavaScript</label>
            <label><input type="radio" name="course" value="Python"> Python</label>
            <label><input type="radio" name="course" value="Go"> Go</label>
            <label><input type="radio" name="course" value="Vue"> Vue</label>
            <br><br>
            <p>你选择的课程是：<strong id="selected-course"></strong></p>
            <button type="button" id="btn-get">确认选择</button>
        </form>
    </div>

    <script>
        $(document).ready(function () {
            $("#btn-get").click(function () {
                // 获取被选中的单选框的值
                var selected = $("input[name='course']:checked").val();
                if (selected) {
                    $("#selected-course").text(selected);
                } else {
                    $("#selected-course").text("尚未选择");
                }
            });
        });
    </script>
</body>
</html>

这个操作的关键在于选择器 input[name='course']:checked——先通过 name 属性锁定同一组单选框，再用 :checked 过滤出被选中的那一个。.val() 拿到的是该选项的 value 属性值。

经验提示：$("input[name='course']:checked").val() 在没有选项被选中时返回 undefined。生产代码中在调用 .val() 前先判断选择器返回的长度（.length），可以避免把 undefined 意外传递给后端接口。

四、单选框验证：确保用户做出选择

在必填场景下，单选框的验证逻辑很简单：检查是否有任何一个同组选项被选中。如果长度为 0，说明用户还没选。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单选框验证 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #radio-error {
            color: #d93025;
            font-size: 16px;
        }
        .container {
            text-align: center;
            margin: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>请选择课程方向（必选）</h3>
        <form id="course-form">
            <label><input type="radio" name="course" value="frontend"> 前端开发</label><br>
            <label><input type="radio" name="course" value="backend"> 后端开发</label><br>
            <label><input type="radio" name="course" value="data"> 数据科学</label><br>
            <label><input type="radio" name="course" value="mobile"> 移动开发</label><br>
            <p id="radio-error"></p>
            <button type="submit" id="btn-submit">提交</button>
        </form>
    </div>

    <script>
        $(document).ready(function () {
            $("#course-form").submit(function (e) {
                // 检查是否有被选中的单选框
                var checkedItem = $("input[name='course']:checked");
                if (checkedItem.length === 0) {
                    // 阻止表单提交
                    e.preventDefault();
                    $("#radio-error").text("请先选择一个课程方向");
                } else {
                    alert("选择成功！你的方向是：" + checkedItem.val());
                }
            });
        });
    </script>
</body>
</html>

验证的核心判断就一行：$("input[name='course']:checked").length === 0。长度为零表示没有任何选项被勾选，此时用 e.preventDefault() 阻止表单提交，并显示错误提示。这种方式比依赖 HTML5 的 required 属性更可控，可以在提示信息中加入自定义样式和文案。

五、单选框联动显示/隐藏内容

根据单选框的选择来控制页面某个区域的显隐，是表单交互中的进阶用法。下面这个示例里，选择“显示内容”会展示一段说明文字，选择“隐藏内容”则收起。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单选框联动显隐 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .container {
            text-align: center;
            margin: 40px;
        }
        #info-box {
            border: 2px solid #1a73e8;
            background-color: #e8f0fe;
            color: #333;
            margin: 15px auto;
            padding: 15px;
            width: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>控制内容显示与隐藏</h3>
        <form>
            <label><input type="radio" name="toggle" value="show"> 显示详情</label>
            <label><input type="radio" name="toggle" value="hide"> 隐藏详情</label>
        </form>
        <div id="info-box">
            <h4>课程介绍</h4>
            <p>本课程涵盖 HTML、CSS、JavaScript 核心内容，适合零基础学员入门，2026 年全新录制。</p>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            // 初始状态：隐藏内容区
            $("#info-box").hide();

            // 监听单选框变化
            $("input[name='toggle']").on("change", function () {
                var selected = $("input[name='toggle']:checked").val();
                if (selected === "show") {
                    $("#info-box").show();
                } else {
                    $("#info-box").hide();
                }
            });
        });
    </script>
</body>
</html>

这里使用 change 事件来监听单选框的状态变更，比 click 更可靠——change 只在值确实改变时触发，避免重复点击同一选项导致的冗余调用。

本节课程知识要点

用 .prop() 而非 .attr() 控制 checked：.prop("checked", true/false) 是操作单选框选中状态的正确方式，能准确反映 DOM 元素的实时属性。
:checked 伪类选择器是取值关键：获取选中值用 $("input[name='组名']:checked").val()，先锁定组名再过滤选中项。
验证前检查长度：$("input[name='组名']:checked").length === 0 判断用户是否未做选择，配合 e.preventDefault() 阻止表单提交。
change 事件优于 click 用于状态监听：单选框的值发生变化时才触发 change，避免无意义的重绘调用。
联动逻辑保持简单：用 show() 和 hide() 控制关联区域的显隐，比直接操作 CSS 更加语义化且代码简洁。

在项目中，单选框的操作大概率绕不开上面这五个场景。我自己的习惯是把单选框的状态变化都集中在一个事件处理函数里管理，避免分散在各处的代码互相覆盖。特别是在复杂表单中，用 $("input[name='xxx']:checked").val() 统一获取值，比给每个选项单独绑定事件更易于维护。

如果在你的项目中单选框和下拉框需要互相替代（比如移动端用下拉框替代单选框以节省空间），把取值逻辑封装成一个小函数接收 name 参数返回选中值，可以同时服务于两种控件，减少重复代码。这个封装习惯在你接手维护他人代码时会体现出价值——当页面上混用多种表单控件时，统一的取值入口能降低遗漏和误判的几率。

本文标签：

jQuery单选框操作全指南：选中、取值、验证与联动