返回上级
2023-11-23在网页开发中，单选框（radio button）是一种常见的表单元素，用于让用户从多个选项中选择一个。当用户提交表单时，需要获取所选单选框的值，以便进行后续处理。jQuery是一种流行的JavaScript库，提供了许多方便的方法来获取单选框的值。
一、基本用法
获取单选框的值，可以使用jQuery的val()方法。该方法可以获取或设置元素的值。对于单选框，其值即为选中的选项的value属性。
示例代码如下：
```html
```
上述代码中，我们定义了两个单选框，分别表示“男性”和“女性”，并将“男性”设为默认选中。当用户点击“Get Value”按钮时，我们使用jQuery的选择器获取选中的单选框，并使用val()方法获取其值。使用alert()方法弹出所选单选框的值。
二、多个单选框的情况
当页面中存在多个单选框时，我们需要为每个单选框设置相同的name属性，以便让浏览器知道它们是一组。在获取值时，我们需要通过选择器指定name属性，并使用:checked伪类选择选中的单选框。
示例代码如下：
```html
```
上述代码中，我们定义了两组单选框，分别表示性别和颜色。当用户点击“Get Value”按钮时，我们分别获取两组单选框的值，并使用alert()方法弹出所选单选框的值。
三、单选框的默认值
有时，我们需要为单选框设置默认值，以便在用户未选择时使用。在HTML中，我们可以使用checked属性来设置默认选中的单选框。在jQuery中，我们可以使用prop()方法来获取或设置元素的属性。
示例代码如下：
```html
```
上述代码中，我们将“男性”设为默认选中的单选框。在获取值时，我们使用filter()方法过滤出选中的单选框，并使用prop()方法获取其checked属性的值。
四、总结
在jQuery中，获取单选框的值非常简单。我们只需要使用val()方法获取选中的单选框的value属性即可。当页面中存在多个单选框时，我们需要为它们设置相同的name属性，并使用:checked伪类选择选中的单选框。如果需要设置默认值，可以使用checked属性或prop()方法。
