uni-app 内置组件：radio-group 组件

单项选择轻松实现，尽在 radio-group 组件

radio-group 组件：单选题的强大之选

在需要用户从一组选项中选择一个答案时，radio-group 组件是您的不二之选。它为您提供了一个简洁易用的方式来构建单选表单元素，让您轻松收集用户输入。

深入了解 radio-group 组件的 API

radio-group 组件具有简单的 API，使其易于使用和自定义：

• name ：用于表单提交时识别 <radio> 元素。
• value ：当前选中的 <radio> 元素的 value 属性。
• disabled ：指定 <radio-group> 是否禁用。
• label-position ：<radio> 标签的位置，可设置为 left 或 right。

探索 radio-group 组件的属性

除了 API 属性之外，radio-group 组件还支持以下属性：

• class ：<radio-group> 的 CSS 类名。
• style ：<radio-group> 的 CSS 样式。
• id ：<radio-group> 的唯一标识符。

使用 radio-group 组件创建单选题

使用 radio-group 组件创建单选题非常简单：

1. 在 <view> 元素中添加一个 <radio-group> 元素。
2. 在 <radio-group> 元素中，添加一个或多个 <radio> 元素，每个 <radio> 元素代表一个选项。
3. 为每个 <radio> 元素指定 label 和 value 属性。

示例代码：

<view>
  <radio-group>
    <radio label="选项一" value="1"></radio>
    <radio label="选项二" value="2"></radio>
  </radio-group>
</view>

当用户点击 <radio> 元素时，<radio-group> 的 value 属性将更新为该 <radio> 元素的 value 属性。

使用 radio-group 组件时的注意事项

使用 radio-group 组件时，请记住以下注意事项：

• <radio-group> 中的 <radio> 元素必须具有相同的 name 属性。
• <radio-group> 的 value 属性始终包含当前选中的 <radio> 元素的 value 属性。
• <radio-group> 是否禁用由 disabled 属性决定。
• <radio-group> 的标签位置由 label-position 属性指定。

结论：单选题的便捷解决方案

radio-group 组件为单选题提供了简单且强大的解决方案。通过其易于使用的 API 和属性，您可以轻松构建定制的单选表单元素，让您的用户体验更加顺畅。

常见问题解答

1. 什么是 radio-group 组件？
   radio-group 组件是一个用于创建单选表单元素的组件。

2. 如何使用 radio-group 组件？
   在 <view> 元素中添加一个 <radio-group> 元素，并在其中添加 <radio> 元素，每个 <radio> 元素代表一个选项。

3. <radio-group> 组件的 value 属性是什么？
   <radio-group> 组件的 value 属性包含当前选中的 <radio> 元素的 value 属性。

4. <radio> 元素的 name 属性必须是什么？
   <radio> 元素的 name 属性必须与同一 <radio-group> 中其他 <radio> 元素的 name 属性相同。

5. 如何禁用 <radio-group> 组件？
   通过将 <radio-group> 组件的 disabled 属性设置为 true 即可将其禁用。