微信小程序checkbox组件使用详解

2019-11-19 14:26:27

字体：大中小

来源：转载

供稿：网友

本文为大家分享了微信小程序checkbox组件的使用方法，供大家参考，具体内容如下

效果图

checkbox组件效果图

WXML

<view class="tui-content"> <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}">  <view class="tui-menu-list"><checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view> </label> </checkbox-group> <view class="tui-show-name"> <text wx:for="{{checkArr}}"> {{item}} </text> </view></view>

Page({ data: { items: [  { name: 'USA', value: '美国' },  { name: 'CHN', value: '中国', checked: 'true' },  { name: 'BRA', value: '巴西' },  { name: 'JPN', value: '日本' },  { name: 'ENG', value: '英国' },  { name: 'TUR', value: '法国' }, ], checkArr: ['中国'] }, checkboxChange: function (e) { var arr = []; e.detail.value.forEach(current => {  for (var value of this.data.items){  if(current === value.name){   arr.push(value.value);   break;  }   } }); this.setData({checkArr: arr}); }})

总结