微信小程序表单类组件radio使用详解

微信小程序表单类组件radio使用详解

本篇经验将继续分享表单类组件中 radio 单选框组件的使用详解。本篇经验将基于第一个手工构建的微信小程序演示，具体构建步骤，可以参考如下经验引用。

0微信小程序开发实战--手工开发第一个小程序

先百度搜索查看 radio 单选框组件的官方文档，该组件的属性较少，含义也很清晰，注意，该组件要结合 radio-group 包装组件一起来使用，通过 radio-group 的 bindchange 回调事件获取被选中的单选框信息。

在 wxml 中通过 和 标签创建一个单向按钮组，并且在 radio-group 组件上，绑定其 bindchange 事件回调函数。注意，这里使用了 wxml 的列表渲染和数据绑定特性。关于这两个特性的具体使用，请参考如下经验引用。

1详解WXML中列表渲染和条件渲染特性的使用

0微信小程序开发实战--WXML数据绑定特性的使用

在 js 文件中定义上述数据绑定所使用变量的初始值，已经 radio-group 上绑定的事件回调函数。

在 wxss 中声明 wxml 中使用的标签类的样式定义。

保存编译后，在模拟器中查看页面效果，符合预期，勾选单选按钮后，在调试器中可以看到事件回调函数打印的信息。