小程序怎样获取单选按钮的vaule

<radio-group class="radio-group" bindchange="radioChange">

<label class="旦或radio" wx:for="亮迟空{{k7}}" wx:key="index">

<radio value="{{item.arr_guige02}}" bindtap='radio' data-id="{{item.guige_key02}}" checked="{{item.checked}}"/>{{item.arr_guige02}}

</label>

</radio-group>

// 获取该组件的id

radio:function(e){

this.setData({

guige_key02: e.currentTarget.dataset.id

})

console.log(e.currentTarget.dataset.id)

},

// 获取用户选择的敬瞎单选框的值

radioChange: function (e) {

this.setData({

arr_guige02: e.detail.value

})

console.log(e.detail.value)

},

方法/步骤

打开微信小程序开发工具，打开已新建的或新建一个项目

请点击输入图片描述

新建一个页面文件wxml，插入一个radio-group，然后内嵌四个radio

请点击输入图片描述

保存代码并查看左侧模拟器，可以查看到一组单选按钮

请点击输入图片描述

在对应页面的JS文件中，定义单选按钮组change事件changeJa

请点击输入图片描隐判述

保存代码并打开内置浏览器控制台，点击单选按钮，查看打印结果

请点击输入图片描述

下载WeUI文件，然后将相关的样式文件拷贝进去，然后修改界面并调用样式类

请点击输入图片描述

再次保存代码拆携明并查看左侧模旅告拟器，可以看到单选按钮样式变成了按钮的样式

请点击输入图片描述

接下来我们进入小程序开发正题

## 小程序实现的功能

目前小程序已经实现的功能有：

- 选择科目在线答题，答题可以选择单题模式还是列表模式

- 答题结束实时展示分数

- 查看分数结束可以查看正确答案

- 答题历史纪录查询，可以查阅当时做题情况

也就是说作为一个在线答题系统，基本功能都已闭环。

## 小程序采用框架

未采用第三方框架，使用小程序原生框架，未引入任何UI组件库

## 开发小程序过程中遇到的问题

先谈第一个问题，radio传值的问消轿闹题

在单选选择题的时候，用到以下两个表单组件

radio-group

radio-group | 微信开放文档

radio

radio | 微信开放文档

默认的radio组件事件

wxml文件

<radio-group class="radio-group" bindchange="radioChange"><radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}"><text>{{item.value}}</text></radio></radio-group>

js文件

Page({ data: { items: [ { name: 'USA', value: '美国' }, { name: 'CHN', value: '中国', checked: 'true' }, { name: 'BRA', value: '巴西' }, { name: 'JPN', value: '日本' }, { name: 'ENG', value: '英国' }, { name: 'FRA', value: '法国' }, ] }, radioChange: function (e) { console.log('radio发生change事件，携带value值为：', e.detail.value) } })

没错，用的就是官方示例代码，我们看到在选择的时候，默认e.detail.value，只能取一个字符串，当时遇到的第一个问题就在帆洞这里，如果把这整个选项的信息提取出来，能简单的用{{JSON.stringfy(item)}}吗，当然不可以，因为原生小程序本身不支持。

当时在社区查到解决方案具体可以参考

[单选框radio除了可以传value可以传其他的值吗？]

单选框radio除了可以传value可以传其他的值吗？ | 微信开放社区

方案就是引入wxs，之前看官方文档，每次到这里，因为不知道这是干什么的，以及解决什么问题，现在明白了，想了解更多关于wxs的内容拿罩，也请移步下面两篇文档

[微信小程序wxs有什么用？]

微信小程序WXS 有什么用？ | 微信开放社区

[小程序里面精度计算问题]

小程序里面数据精度计算问题 | 微信开放社区

## 小程序截图

## 代码适用人群

本代码建议小程序初学者或者大学做毕业设计的同学参考。

## 代码路径

小肥羊/从业资格考试助手

## 扫码体验

微信小程序搜索 从业资格题库或者直接扫码

---