技术文摘

jQuery 实现单选框选中与取消选中

2025-01-10 20:28:58 小编

jQuery 实现单选框选中与取消选中

在网页开发中，单选框的选中与取消选中操作十分常见。借助 jQuery 强大的功能，我们可以轻松实现这一交互效果，为用户提供更加流畅的操作体验。

我们需要搭建一个基本的 HTML 结构，包含单选框。例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery 单选框操作</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="radio" name="gender" value="male" id="male"> 男
    <input type="radio" name="gender" value="female" id="female"> 女
    <button id="selectButton">选中男</button>
    <button id="deselectButton">取消选中</button>
</body>
</html>

在上述代码中，我们创建了两个单选框，分别代表“男”和“女”，还添加了两个按钮，用于触发选中和取消选中操作。引入了 jQuery 库，这是实现功能的关键。

接下来，使用 jQuery 代码实现单选框的选中与取消选中功能：

$(document).ready(function() {
    // 为“选中男”按钮绑定点击事件
    $('#selectButton').click(function() {
        $('#male').prop('checked', true);
    });

    // 为“取消选中”按钮绑定点击事件
    $('#deselectButton').click(function() {
        $('input[type="radio"]').prop('checked', false);
    });
});

在这段 jQuery 代码中，$(document).ready() 函数确保在文档加载完成后才执行代码。当点击“选中男”按钮时，$('#male').prop('checked', true); 这行代码将 id 为 male 的单选框设置为选中状态。而点击“取消选中”按钮时，$('input[type="radio"]').prop('checked', false); 代码会将所有类型为 radio 的输入元素（即单选框）的选中状态设置为 false，从而实现取消选中的效果。

通过以上简单的步骤，我们就利用 jQuery 成功实现了单选框的选中与取消选中功能。这种交互方式在用户注册表单、调查问卷等场景中应用广泛。掌握 jQuery 实现此类功能的方法，能够让我们更加高效地开发出具有良好用户体验的网页应用。无论是新手开发者还是经验丰富的工程师，都可以通过灵活运用 jQuery 来满足各种业务需求，提升项目的质量和用户满意度。

TAGS: JQuery操作 jQuery实现单选框选中单选框取消选中

万千站长工具

技术文摘

jQuery 实现单选框选中与取消选中

jQuery 实现单选框选中与取消选中

欢迎使用万千站长工具！