效果展示
![在这里插入图片描述](https://img-blog.csdnimg.cn/1295d3ca71a748bd9c2169c335328c01.png)
功能代码
前端页面
*******************单选框测试***************
<radio-group bindchange="danxuankuang1">
<radio value="单选框选择1"> 单选框选择1</radio>
<radio value="单选框选择2"> 单选框选择2</radio>
</radio-group>
<view>
您选择的是{{daxuan_res1}}
</view>
<radio-group bindchange="danxuankuang2">
<radio wx:for="{{daxuan_res_list}}" wx:key="index" value="{{item}}"> {{item}}</radio>
</radio-group>
<view>
您选择的是{{daxuan_res2}}
</view>
*******************复选框测试***************
<view>
<checkbox-group bindchange="fuxuankuang">
<checkbox wx:for="{{fuxuan_data}}" wx:key="index" value="{{item.value}}">
{{item.name}}
</checkbox>
</checkbox-group>
</view>
<view>
您选择的是{{fuxuan_res}}
</view>
实现代码
Page({
data: {
daxuan_res1: "",
daxuan_res2: "",
fuxuan_res: [],
daxuan_res_list: ["中国", "美国"],
fuxuan_data: [
{
name: "中国",
value: "zhongguo"
},
{
name: "美国",
value: "meiguo"
},
{
name: "英国",
value: "yingguo"
},
]
},
danxuankuang1(event) {
console.log(event.detail.value)
this.setData({
daxuan_res1: event.detail.value
})
},
danxuankuang2(event) {
console.log(event.detail.value)
this.setData({
daxuan_res2: event.detail.value
})
},
fuxuankuang(event) {
console.log(event)
this.setData({
fuxuan_res: event.detail.value
})
},
})