uniapp---多选框功能

//多选
<checkbox-group @change="checkboxChange">
        <view class="y-list-item" v-for="(item,index) in details" :key="index">
          <view class="flex">
            <view class=""> 
              <checkbox :value="String(item.id)"  //不用string类型会报错                                   
                :checked="checkboxValue.includes(item.id)" />                  
            </view>
            //其他代码可以根据位置书写
          </view>
</checkbox-group>

//全选
<checkbox-group @change="allChoose">
              <label>
                <checkbox value="1" :checked="allChecked?true:false"></checkbox><span         
                    style="margin-right: 10rpx;">全选 </span>
              </label>
</checkbox-group>

//data数据
 data() {
      return {
        details: [], 
        checkboxValue: [], //多选框值
        allChecked: false, //是否全选
      }
  },

 //多选事件
checkboxChange(item) {
        this.checkboxValue = item.detail.value
        if (this.checkboxValue.length > 0 && this.checkboxValue.length == this.details.length) {  //判断选中长度和你的内容长度是否一致，如果一致更改全选状态
          this.allChecked = true;
        } else {
          this.allChecked = false;
        }
      },
      // 全选事件
      allChoose(item) {
        let choose = item.detail.value;
        // 全选
        if (choose[0] == '1') {
          this.allChecked = true;
          for (let res of this.details) {
            let res = item.id;
            if (!this.checkboxValue.includes(res)) {
              this.checkboxValue.push(res);
            }
          }
        } else {
          // 取消全选
          this.allChecked = false;
          this.checkboxValue = [];
        }
      },