jquery 取消radio选中

原创

mob64ca12dcc794 2023-10-14 07:10:38 ©著作权

文章标签 jQuery HTML html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12dcc794的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 取消 radio 选中

在 Web 开发中，我们经常会遇到需要对 radio 执行选中或取消选中的操作。radio 是一组互斥的选项，只能选择其中的一个。本文将介绍如何使用 jQuery 来取消 radio 的选中状态。

1. HTML 结构

首先，我们需要在 HTML 中创建一组 radio，如下所示：

<input type="radio" name="color" value="red" id="red">
<label for="red">Red</label>
<input type="radio" name="color" value="blue" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" value="green" id="green">
<label for="green">Green</label>

上述代码创建了一个包含三个 radio 的组，name 属性用于标识它们是一组。每个 radio 都有一个唯一的 id，并且通过 label 元素与其关联起来，以提供更好的用户体验。

2. 使用 jQuery 取消选中状态

首先，我们需要引入 jQuery 库。可以从官方网站中下载最新的 jQuery 库，或直接使用 CDN 加载：

<script src="

接下来，我们可以使用 jQuery 来取消 radio 的选中状态。以下是一个示例代码：

$(document).ready(function() {
  $('#red').prop('checked', false);
});

在上述代码中，我们使用 prop() 方法来修改 checked 属性的值。将其设置为 false 即可取消选中状态。

3. 完整示例代码

下面是一个完整的示例代码，演示了如何使用 jQuery 取消 radio 的选中状态：

<!DOCTYPE html>
<html>
<head>
  <title>Cancel Radio Selection</title>
  <script src="
</head>
<body>
  <input type="radio" name="color" value="red" id="red">
  <label for="red">Red</label>
  <input type="radio" name="color" value="blue" id="blue">
  <label for="blue">Blue</label>
  <input type="radio" name="color" value="green" id="green">
  <label for="green">Green</label>

  <script>
    $(document).ready(function() {
      $('#red').prop('checked', false);
    });
  </script>
</body>
</html>

在上述代码中，我们将取消了 id 为 red 的 radio 的选中状态。