The use of checkbox components in WeChat mini programs-JS Tutorial-php.cn

The use of checkbox components in WeChat mini programs

亚连

Release： 2018-06-08 16:14:33

Original

1973 people have browsed it

This article mainly introduces the use of the checkbox component of the WeChat applet, which has certain reference value. Interested friends can refer to it

This article shares the use of the checkbox component of the WeChat applet. Method, for your reference, the specific content is as follows

Rendering

The use of checkbox components in WeChat mini programs

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>

Copy after login

Page({
 data: {
 items: [
  { name: &#39;USA&#39;, value: &#39;美国&#39; },
  { name: &#39;CHN&#39;, value: &#39;中国&#39;, checked: &#39;true&#39; },
  { name: &#39;BRA&#39;, value: &#39;巴西&#39; },
  { name: &#39;JPN&#39;, value: &#39;日本&#39; },
  { name: &#39;ENG&#39;, value: &#39;英国&#39; },
  { name: &#39;TUR&#39;, value: &#39;法国&#39; },
 ],
 checkArr: [&#39;中国&#39;]
 },
 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});
 }
})

Copy after login

Summary

Since 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 when looping this.data.items, use for...of...

The above is what I compiled For everyone, I hope it will be helpful to everyone in the future.

Singleton mode in JS to implement data addition, deletion, modification and query

Use Vue to imitate Toutiao (detailed tutorial )

How to configure eslint for React development

The above is the detailed content of The use of checkbox components in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!