jquery 设置单选框选中

原创

mob64ca12f15103 2023-12-01 11:19:37 ©著作权

文章标签 jQuery 单选框表单 文章分类 jQuery 前端开发

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

jQuery 设置单选框选中

在Web开发中，我们经常需要使用表单元素来接收用户的输入。其中，单选框（Radio Button）是一种常见的表单元素，用于在多个选项中选择一个。

在某些情况下，我们可能需要通过JavaScript代码来设置单选框的选中状态，而jQuery是一种流行的JavaScript库，可以帮助我们更方便地操作DOM元素。

jQuery基础知识

在使用jQuery之前，我们需要先引入jQuery库文件。可以通过以下方式来引入：

<script src="

接下来，我们可以使用$符号来表示jQuery对象。

单选框的HTML结构

在HTML中，我们可以使用<input>元素来表示单选框。单选框的选中状态通过checked属性来控制。当checked属性为true时，单选框被选中；当checked属性为false时，单选框未选中。

以下是一个简单的单选框的HTML结构示例：

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

在上面的例子中，我们有两个单选框，它们的name属性值相同，表示它们是一组单选框。只能选择其中的一个选项。

使用jQuery设置单选框选中

使用jQuery设置单选框选中很简单，只需操作对应的属性即可。

首先，我们需要通过选择器来选中目标单选框，然后使用.prop()方法来设置checked属性的值。

以下是一个设置单选框选中的jQuery代码示例：

$("[name=gender][value=male]").prop("checked", true);

在上面的例子中，我们使用属性选择器[name=gender][value=male]选中name属性为"gender"且value属性为"male"的单选框，并将其checked属性设置为true，即选中"Male"选项。

同样，我们可以使用相同的方法来设置其他单选框的选中状态。

完整示例

为了更好地理解如何使用jQuery设置单选框选中，以下是一个完整的示例：

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

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

<script>
$("[name=gender][value=male]").prop("checked", true);
</script>

</body>
</html>

在上面的示例中，我们使用了引入jQuery库的<script>标签，并在<script>标签中使用jQuery的代码来设置单选框选中。在这个示例中，"Male"选项会被默认选中。