微信小程序开发在checkbox多选中添加到数组取消选中删除完整用例

当然！下面是一个完整的示例，演示如何在微信小程序开发中实现 checkbox 多选中添加到数组，并在取消选中时从数组中删除的功能。

首先，在 wxml 文件中添加 checkbox 组件和一个按钮：

<view>
  <checkbox-group bindchange="checkboxChange">
    <label wx:for="{{checkboxList}}" wx:key="{{item.id}}">
      <checkbox value="{{item.value}}" />
      {{item.label}}
    </label>
  </checkbox-group>

  <button bindtap="deleteChecked">删除选中</button>
</view>

然后，在 js 文件中定义数据和相关的方法：

Page({
  data: {
    checkboxList: [
      { id: 1, label: '选项1', value: 'value1' },
      { id: 2, label: '选项2', value: 'value2' },
      { id: 3, label: '选项3', value: 'value3' }
    ],
    checkedValues: []
  },

  checkboxChange: function(event) {
    const value = event.currentTarget.dataset.value;
    const checked = event.detail.value.includes(value);

    if (checked) {
      // 添加到数组
      this.data.checkedValues.push(value);
    } else {
      // 从数组中删除
      const index = this.data.checkedValues.indexOf(value);
      if (index > -1) {
        this.data.checkedValues.splice(index, 1);
      }
    }
  },

  deleteChecked: function() {
    // 删除选中的值
    this.setData({
      checkedValues: []
    });
  }
});

在这个示例中，`checkboxList` 是一个包含多个选项的数组，`checkedValues` 是用于存储选中值的数组。

在 `checkboxChange` 方法中，我们通过判断选中状态来添加或删除值。如果选中状态为 true，则将该值添加到 `checkedValues` 数组中；如果选中状态为 false，则从 `checkedValues` 数组中删除该值。

最后，在 `deleteChecked` 方法中，我们通过调用 `setData` 方法将 `checkedValues` 数组重置为空数组，以清空已选中的值。

这样，当您在微信小程序中选择或取消选择 checkbox 时，相应的值将添加到或从 `checkedValues` 数组中删除。

希望这个完整的示例对您有所帮助！如果您有任何疑问，请随时提问。