jQuery取消单选框选中|极客教程

jQuery取消单选框选中

单选框（Radio Buttons）被用于在一组中只能选择一个选项。在某些情况下，我们可能需要取消选中某个已选择的单选框。在这篇文章中，我们将使用jQuery来实现取消单选框选中的功能。

1. 简介

1.1 jQuery

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档的遍历、事件处理、动画等操作。通过使用jQuery，我们可以更加方便地管理网页中的各种元素。

1.2 单选框

单选框是HTML表单中的一种控件，它允许用户从多个选项中选择一个选项。每个单选框都有一个对应的value值，当选中某个单选框时，该单选框的value值会被提交到服务器或JavaScript代码中。

2. 取消单选框选中的方法

取消单选框选中的方法有以下几种：

2.1 使用prop()方法

$('input[type="radio"]').prop('checked', false);

2.2 使用removeAttr()方法

$('input[type="radio"]').removeAttr('checked');

2.3 使用attr()方法

$('input[type="radio"]').attr('checked', false);

这三种方法的效果是一样的，都可以取消单选框的选中状态。

3. 示例代码

下面是一个示例代码，在点击”取消选中”按钮时取消所有单选框的选中状态：

<!DOCTYPE html>
<html>
<head>
    <title>取消单选框选中</title>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script>
         $(document).ready(function() {$ ("#cancelButton").click(function() {
                $('input[type="radio"]').prop('checked', false);
            });
        });
    </script>
</head>
<body>
    <h1>取消单选框选中</h1>

    <input type="radio" name="option" value="option1" checked>选项1<br>
    <input type="radio" name="option" value="option2">选项2<br>
    <input type="radio" name="option" value="option3">选项3<br>

    <button id="cancelButton">取消选中</button>
</body>
</html>

在这个示例代码中，我们使用了prop()方法来取消单选框的选中状态。当点击”取消选中”按钮时，所有单选框的选中状态都会被取消。