Detailed usage of the mini-program checkbox component, and detailed usage of checkbox
This article shares the usage of the mini-program checkbox component for your reference. The specific content is as follows:
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: 'u.s.}, {name: 'chn', value: 'China', checked: 'true'}, {name: 'br', value: 'Brazil '}, {name: 'jpn', value: 'Japan '}, {name: 'eng ', value: 'British '}, {name: 'tur', value: 'French '},], checkArr: ['China']}, 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 });}})
Summary
- Because e. detail. value and this. data. items are both array elements for Attribute comparison and search, a double loop is used here.
- The forEach loop cannot jump out of the loop, so the... Of...
Download DEMO
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.