首页 分享 小程序checkbox,radio组件

小程序checkbox,radio组件

来源:花匠小妙招 时间:2024-11-15 22:50
小程序的checkbox,radio 1.checkbox是复选框2.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

所属分类:花卉
上一篇: 《经济法基础》知识点:网上支付
下一篇: 手机可支付 时髦的花钱方式你懂几

推荐分享