欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小程序checkbox,radio组件

程序员文章站 2022-05-31 18:46:32
...

小程序的checkbox,radio

1.checkbox是复选框

而checkbox-group是用来同容纳多个checkbox的容器,checkbox-group里面有一个用来绑定bindchange的,当选项发生改变时触发。

效果图:
小程序checkbox,radio组件

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>

图片:
小程序checkbox,radio组件

JS文件代码:

checkbox:[
     {admin:'会员卡余额(可用 元)',value:'会员卡余额(可用 元)',check:'true'},{admin:'微信支付',value:'微信支付'}
   ],
   checkboxText:''
},
  checkboxChange:function(e){
    var text = e.detail.value;
    this.setData({checkboxText:'已选的付款方式:'+text});
},

图片:
小程序checkbox,radio组件

2.radio组件

每次只能选一个选项,一样radio-group也是用来同容纳多个radio的容器,radio-group里面有一个用来绑定bindchange的,当选项发生改变时触发。

效果图:
小程序checkbox,radio组件

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>

图片:
小程序checkbox,radio组件

JS文件代码:

radio:[
     {admin:'会员卡余额(可用 元)',value:'会员卡余额(可用 元)',check:'true'},{admin:'微信支付',value:'微信支付'}
   ],
   radioText:''
},
  radioChange:function(e){
    var text = e.detail.value;
    this.setData({radioText:'已选的付款方式:'+text});
},

小程序checkbox,radio组件

相关标签: 笔记