DEMO下載
效果圖

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>
JS
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});
}
})
總結
- 由於e.detail.value和this.data.items都是數組元素進行屬性對比查找,所以此處采用了雙循環。
- forEach循環不能在循環中跳出,所以在循環this.data.items時采用for…of…
其他
我的博客,歡迎交流!
我的CSDN博客,歡迎交流!
微信小程序專欄
前端筆記專欄
微信小程序實現部分高德地圖功能的DEMO下載
微信小程序實現MUI的部分效果的DEMO下載
微信小程序實現MUI的GIT項目地址
微信小程序實例列表
前端筆記列表
游戲列表