小程序checkbox回显选中

可以通过在data中定义一个数组来记录选中的数据，在checkbox的change事件中动态更新该数组。然后在渲染页面时，通过wx:if或wx:for循环判断哪些数据在数组中被选中，从而实现回显选中。

示例代码如下：

wxml：

<view class="checkbox-group">
  <label class="checkbox" wx:for="{{items}}" wx:key="{{index}}">
    <checkbox value="{{item.value}}" checked="{{item.checked}}" bindchange="checkboxChange">{{item.name}}</checkbox>
  </label>
</view>

js：

Page({
  data: {
    items: [
      {name: '选项1', value: '1', checked: false},
      {name: '选项2', value: '2', checked: false},
      {name: '选项3', value: '3', checked: false},
      {name: '选项4', value: '4', checked: false},
    ],
    checkedList: [] // 选中的数据
  },

  checkboxChange(e) {
    const value = e.detail.value
    const index = this.data.items.findIndex(item => item.value === value)
    const checked = !!value.length
    // 更新选中状态
    this.setData({
      [`items[${index}].checked`]: checked
    })
    // 更新选中的数据
    if (checked) {
      this.setData({
        checkedList: [...this.data.checkedList, value]
      })
    } else {
      this.setData({
        checkedList: this.data.checkedList.filter(item => item !== value)
      })
    }
  }
})

在渲染页面时，可以通过wx:if或wx:for循环判断哪些数据在checkedList数组中被选中，从而实现回显选中：

<view class="checked-list">
  <view wx:if="{{checkedList.indexOf('1') !== -1}}">选项1</view>
  <view wx:if="{{checkedList.indexOf('2') !== -1}}">选项2</view>
  <view wx:if="{{checkedList.indexOf('3') !== -1}}">选项3</view>
  <view wx:if="{{checkedList.indexOf('4') !== -1}}">选项4</view>
</view>