小程序checkbox,radio组件
1.checkbox是复选框
而checkbox-group是用来同容纳多个checkbox的容器,checkbox-group里面有一个用来绑定bindchange的,当选项发生改变时触发。
效果图:
WXML文件代码:
<!-- checkbox多选按钮 --> <text>选择付款方式</text> <checkbox-group bindchange="checkboxChange"> <label wx:for="{{checkbox}}"> <checkbox checked="{{item.check}}" value="{{item.value}}">{{item.admin}}</checkbox> </label> </checkbox-group> <text>{{checkboxText}}</text> <view class="bot-botton"> <button size="mini" type="primary" bindtap="detail">付款</button> </view> 1234567891011
图片:
JS文件代码:
checkbox:[ {admin:'会员卡余额(可用 元)',value:'会员卡余额(可用 元)',check:'true'},{admin:'微信支付',value:'微信支付'} ], checkboxText:'' }, checkboxChange:function(e){ var text = e.detail.value; this.setData({checkboxText:'已选的付款方式:'+text}); }, 123456789
图片:
2.radio组件
每次只能选一个选项,一样radio-group也是用来同容纳多个radio的容器,radio-group里面有一个用来绑定bindchange的,当选项发生改变时触发。
效果图:
WXML文件代码:
<!-- radio组件 --> <text>选择付款方式</text> <radio-group bindchange="radioChange"> <label wx:for="{{radio}}"> <radio checked="{{item.radio}}" value="{{item.value}}">{{item.admin}}</radio> </label> </radio-group> <text>{{radioText}}</text> <view class="bot-botton"> <button size="mini" type="primary" bindtap="detail">付款</button> </view> 1234567891011
图片:
JS文件代码:
radio:[ {admin:'会员卡余额(可用 元)',value:'会员卡余额(可用 元)',check:'true'},{admin:'微信支付',value:'微信支付'} ], radioText:'' }, radioChange:function(e){ var text = e.detail.value; this.setData({radioText:'已选的付款方式:'+text}); }, 123456789
相关知识
小程序交流专区
花店小程序模板制作
慕尚花坊小程序开发
花坛小程序开发工具
基于微信小程序的鲜花销售(毕业设计,包括源码,数据库,教程).zip
点击input checkbox之后代码里面自动添加checked=“checked”
慕尚花坊小程序笔记
慕尚花坊小程序
基于uniapp微信小程序的摄影街拍圈子交流平台
基于微信小程序的电子产品租赁系统(源码+LW+调试文档+讲解)
网址: 小程序checkbox,radio组件 https://www.huajiangbk.com/newsview562861.html
上一篇: 《经济法基础》知识点:网上支付 |
下一篇: 手机可支付 时髦的花钱方式你懂几 |
推荐分享

- 1君子兰什么品种最名贵 十大名 4012
- 2世界上最名贵的10种兰花图片 3364
- 3花圈挽联怎么写? 3286
- 4迷信说家里不能放假花 家里摆 1878
- 5香山红叶什么时候红 1493
- 6花的意思,花的解释,花的拼音 1210
- 7教师节送什么花最合适 1167
- 8勿忘我花图片 1103
- 9橄榄枝的象征意义 1093
- 10洛阳的市花 1039