小程序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://m.huajiangbk.com/newsview562861.html
| 上一篇: 《经济法基础》知识点：网上支付 |
下一篇: 手机可支付 时髦的花钱方式你懂几 |
