微信小程序----checkbox组件

效果体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

DEMO下载

效果图

WXML

  
    
      {{item.value}}
    
  
  
     {{item}} 
  

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});
  }
})

总结

1. 由于e.detail.value和this.data.items都是数组元素进行属性对比查找，所以此处采用了双循环。
2. forEach循环不能在循环中跳出，所以在循环this.data.items时采用for…of…

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表