怎么在微信小程序中实现单选radio

这篇文章给大家介绍怎么在微信小程序中实现单选radio，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

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>

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

关于怎么在微信小程序中实现单选radio就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。