jQuery 单选框设定值

在网页开发中，我们经常会使用到单选框（Radio Button）来让用户从多个选项中选择一个。在使用jQuery来操作单选框时，我们可以通过设定值的方式来控制选中哪个选项。本文将介绍如何使用jQuery来设定单选框的值，并给出相应的代码示例。

单选框的基本结构

首先，我们来看一下单选框的基本HTML结构。一个简单的单选框由一组input标签组成，每个input标签都有一个相同的name属性，这样它们就可以成为一组单选框。

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

在上面的代码中，我们定义了一个名为"gender"的单选框组，其中包含了一个男性选项和一个女性选项。

使用jQuery设定单选框的值

获取选中的值

要获取当前选中的单选框的值，我们可以使用jQuery的:checked选择器来选中被选中的单选框，然后通过val()方法获取其值。

var selectedValue = $("input[name='gender']:checked").val();
console.log(selectedValue);

上面的代码将会打印出当前选中的单选框的值，即"male"或"female"。

设定值

如果我们想通过代码来设定单选框的值，只需要通过jQuery选择相应的单选框元素，然后设置其checked属性为true即可。

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

上面的代码将会把值为"female"的单选框设为选中状态。

完整示例

下面是一个完整的示例，演示了如何使用jQuery来设定单选框的值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radio Button Example</title>
<script src="
</head>
<body>

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

<script>
// 设定单选框的值为female
$("input[name='gender'][value='female']").prop("checked", true);

// 获取当前选中的值
var selectedValue = $("input[name='gender']:checked").val();
console.log(selectedValue);
</script>

</body>
</html>

在上面的示例中，我们在页面加载完毕后将单选框的值设为"female"，然后获取当前选中的值并打印到控制台中。

流程图

flowchart TD
    A(开始)
    B{用户选择}
    C[判断选择结果]
    D[设定选中值]
    E(结束)

    A --> B
    B --> C
    C -- 选择male --> D
    D --> E
    C -- 选择female --> D
    D --> E

关系图

erDiagram
    GENDER {
        string gender
    }

在本文中，我们详细介绍了如何使用jQuery来设定单选框的值。通过上面的示例代码，你可以很容易地在自己的项目中应用这些技巧。希望本文对你有所帮助！