微信小程序单选radio及多选checkbox按钮用法示例
作者:weixin_41991473
这篇文章主要介绍了微信小程序单选radio及多选checkbox按钮用法,结合实例形式分析了微信小程序中单选radio及多选checkbox按钮的选项设置、读取、选中等相关操作技巧,需要的朋友可以参考下
本文实例讲述了微信小程序单选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>
附:多选获得的值是一个数组,单选获得的值是一个单值
希望本文所述对大家微信小程序开发有所帮助。
您可能感兴趣的文章:
- 微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
- 微信小程序将页面按钮悬浮固定在底部的实现代码
- 微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
- 微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
- 微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
- 微信小程序批量监听输入框对按钮样式进行控制的实现代码
- 微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
- 微信小程序按钮点击动画效果的实现
- 操作按钮悬浮固定在微信小程序底部的实现代码
- 详解微信小程序胶囊按钮返回|首页自定义导航栏功能
- 微信小程序mpvue点击按钮获取button值的方法
- 微信小程序开发之点击按钮退出小程序的实现方法
- 微信小程序按钮巧妙用法