jQuery默认选中radio

本文将介绍如何使用jQuery来默认选中radio按钮，并提供相应的代码示例。

简介

在网页表单中，radio按钮用于选择一个选项。默认情况下，radio按钮是未选中状态，用户需要手动选择其中一个选项。但有些情况下，我们希望在页面加载时就自动选中一个radio按钮，以提高用户体验。

jQuery是一个快速、小巧、功能丰富的JavaScript库，可以简化JavaScript编程。使用jQuery，我们可以轻松地操作DOM元素，包括radio按钮。

默认选中radio按钮的方法

默认选中radio按钮有多种方法，下面将介绍其中两种常用方法：通过设置属性和使用jQuery方法。

通过设置属性

首先，我们可以通过设置radio按钮的checked属性来实现默认选中。checked属性是一个布尔属性，如果设置为true，则该radio按钮被选中。

下面是一个示例代码：

<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female

在上述代码中，通过设置第一个radio按钮的checked属性为true，使其默认选中。

使用jQuery方法

除了设置属性，我们还可以使用jQuery提供的方法来默认选中radio按钮。

首先，我们需要给每个radio按钮添加一个共同的类名，以便于选择它们。这里我们给所有radio按钮添加一个类名为"radio-btn"。

<input type="radio" class="radio-btn" name="gender" value="male"> Male
<input type="radio" class="radio-btn" name="gender" value="female"> Female

然后，我们可以使用jQuery的prop()方法来选中一个radio按钮。

$(document).ready(function(){
  $(".radio-btn[value='male']").prop("checked", true);
});

上述代码中，我们通过选择类名为"radio-btn"且value为"male"的radio按钮，并调用prop()方法将其checked属性设置为true，从而默认选中。

示例代码

下面是一个完整的示例代码，演示了如何使用jQuery默认选中radio按钮：

<!DOCTYPE html>
<html>
<head>
  <script src="
</head>
<body>

<input type="radio" class="radio-btn" name="gender" value="male"> Male
<input type="radio" class="radio-btn" name="gender" value="female"> Female

<script>
  $(document).ready(function(){
    $(".radio-btn[value='male']").prop("checked", true);
  });
</script>

</body>
</html>

在上述代码中，我们引入了jQuery库，并创建了两个radio按钮。通过设置类名和value值，我们可以使用jQuery在页面加载时默认选中"male"。

总结

通过本文的介绍，我们了解了如何使用jQuery来默认选中radio按钮。无论是通过设置属性还是使用jQuery方法，都可以轻松实现这一功能。希望本文对你有所帮助！

流程图

flowchart TD
  A[开始] --> B[创建radio按钮]
  B --> C[设置属性或使用jQuery方法]
  C --> D[完成]
  D --> E[结束]

流程图展示了实现默认选中radio按钮的过程，从创建radio按钮开始，通过设置属性或使用jQuery方法，最终完成默认选中的效果。

参考链接

  • [jQuery官方网站](
  • [jQuery API文档](