微信小程序实现多选框全选操作

wxml：

<view class="container">
    
    <view class="page-body">
        <view class="page-section">
            <view class="page-section-title">推荐展示样式view>
            <view class="weui-cells weui-cells_after-title">
                <checkbox-group bindchange="checkboxChange">
                    <label  wx:for="{{items}}" wx:key="{{item.value}}">
                        <view >
                            <checkbox value="{{item.value}}" checked="{{item.checked}}" />
                        view>
                        <view>{{item.name}}view>
                    label>
                checkbox-group>
            view>
        view>
    view>
    <text>全选text>
    <checkbox-group bindchange="checkboxAll">
        <checkbox checked="{{checkedAll}}" />
    checkbox-group>
view>

js：

Page({
    data: {
        checkedAll: "",
        items: [{
                value: 'USA',
                name: '美国'
            },
            {
                value: 'CHN',
                name: '中国',
                checked: 'true'
            },
            {
                value: 'BRA',
                name: '巴西'
            },
            {
                value: 'JPN',
                name: '日本'
            },
            {
                value: 'ENG',
                name: '英国'
            },
            {
                value: 'FRA',
                name: '法国'
            }
        ]
    },
    checkboxChange(e) {
        console.log('checkbox发生change事件，携带value值为：', e.detail.value)
        const items = this.data.items
        const values = e.detail.value
        for (let i = 0, lenI = items.length; i < lenI; ++i) {
            items[i].checked = false
            for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
                if (items[i].value === values[j]) {
                    items[i].checked = true
                    break
                }
            }
        }
        this.setData({
            items
        })
        if (e.detail.value.length == 6) {
            console.log(this.data.checkedAll);
            this.setData({
                checkedAll: true
            })
        }else{
            this.setData({
                checkedAll: ""
            })
        }
    },
    checkboxAll(e) {
        if (e.detail.value.length == 1) {
            // 全选状态
            const items = this.data.items
            for (let i = 0; i < items.length; i++) {
                items[i].checked = true
            }
            this.setData({
                items
            })
        } else {
            // 没有全选状态
            const items = this.data.items
            for (let i = 0; i < items.length; i++) {
                items[i].checked = false
            }
            this.setData({
                items
            })
        }
    }
})

wxss：

/* 未选中的背景样式 */
checkbox .wx-checkbox-input{
  width: 28rpx; 
  height: 28rpx;
  border-color: #999;
}

/* 选中后的背景样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked,.checked{
  background-color: #fff;
  border-color: #ff3333;
}

/* 选中后的勾子样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 50%;
  text-align: center;
  font-size:32rpx; 
  color: #ff3333; 
  background: transparent;
  transform:translate(-50%, -50%) scale(1);
  -webkit-transform:translate(-50%, -50%) scale(1);
}