微信小程序中如何实现单选radio和多选checkbox按钮的用法示例？

本文共计407个文字，预计阅读时间需要2分钟。

原文示例：本文字例讲述了微信小程序中单选radio及多选checkbox按钮用法。分享给大 家供参考，具体如下：

1. 单选：radio 实例：js: Page({ data: { radioId: , loves: [{ id: 1, name: 跑步, checked: 'true' }, { id: 2, name: 篮球, checked: '' }] } })

改写后：本例介绍微信小程序中单选按钮（radio）和多选按钮（checkbox）的使用方法。以下为具体示例：

1. 单选：radio 示例：Page({ data: { radioId: , loves: [{ id: 1, name: 跑步, checked: true }, { id: 2, name: 篮球, checked: false }] } })

本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考，具体如下：

1.单选：radio

实例：

js:

Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ var Id=e.value.id this.setData({ radioId:Id }) }, })

wxml:

<radio-group class="radio" bindChange="updataRadio"> <view wx:for="{{loves}}"> <radio value="{{item.id}}" checked="{{item.checked}}">{{item.name}}</radio> </view> </radio-group>

2.多选：CheckBox

实例：

js:

Page({ data : { radioId:[], loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ var Id=e.value.id this.setData({ radioId:Id }) }, })

wxml:

<checkbox-group class="checkbox" bindChange="updataRadio"> <view wx:for="{{loves}}"> <chechbox value="{{item.id}}" checked="{{item.checked}}">{{item.name}}</chechbox> </view> </checkbox-group>

附：多选获得的值是一个数组，单选获得的值是一个单值

希望本文所述对大家微信小程序开发有所帮助。