微信小程序 checkbox实现多选复制清空效果

wxml

<text>请勾选你认识的怪物</text>
<checkbox-group bindchange="OnSelect" class="content">
  <checkbox class="monster_tag" wx:for="{{monster}}" wx:for-index="index" wx:key="index" value="{{item.name}}"
    checked="{{item.checked}}">{{item.name}} LV{{item.lv}} HP{{item.hp}}
  </checkbox>
</checkbox-group>

<view class="btn_box">
  <button plain="true" size="mini" bindtap="copy">复制</button>
  <button plain="true" size="mini" bindtap="clear">清空</button>
</view>

js

Page({
  data: {
    monster: [
      { 'id': '1', 'name': '独眼蝙蝠', 'lv': 1, 'hp': 100 },
      { 'id': '2', 'name': '彭哆菇', 'lv': 3, 'hp': 300 },
      { 'id': '3', 'name': '象牙甲虫', 'lv': 5, 'hp': 500 },
      { 'id': '4', 'name': '山岭剑龙', 'lv': 7, 'hp': 700 },
      { 'id': '5', 'name': '暴躁的迪米', 'lv': 9, 'hp': 900 },
      { 'id': '6', 'name': '山地幼狼', 'lv': 11, 'hp': 1100 },
      { 'id': '7', 'name': '山地狼王', 'lv': 15, 'hp': 15000 },
    ],
    obj: ''
  },

  OnClick(e) {
    console.log('点击了复制按钮')
    console.log('接受到参数:', e.currentTarget.dataset.value)

    wx.setClipboardData({
      data: '要复制的数据',
      success: function (res) {
        console.log("复制成功:", res)
      },
    })
  },

  OnSelect(e) {
    console.log(e)
    console.log("勾选了: ", e.detail.value)

    let { obj, monster } = this.data
    let { value } = e.detail
    obj = value

    for (let i in monster) {
      monster[i].checked = false
      for (let o in value) {
        if (monster[i].name == value[o]) {
          monster[i].checked = true
        }
      }
    }

    console.log(obj)
    console.log(monster)

    this.setData({
      obj,
      monster
    })
  },

  copy() {
    console.log("点击了复制按钮")
    let { obj } = this.data

    if (obj != '') {
      wx.setClipboardData({
        data: '' + obj,
        success: function (res) {
          console.log("复制成功:", res)
        },
      })
    } else {
      wx.showToast({
        title: '未勾选任何数据!',
        duration: 2000,
        icon: 'none'
      })
    }

  },

  clear() {
    console.log("点击了清空选择按钮")
    let { obj, monster } = this.data

    if (obj != '') {
      obj = ''
      for (let i in monster) {
        monster[i].checked = false
      }
    } else {
      wx.showToast({
        title: '数据为空,不用清理',
        duration: 2000,
        icon: 'none'
      })
    }

    console.log(obj, monster)

    this.setData({
      obj,
      monster,
    })
  }

})

效果图