uniapp 复选框 全选

html部分

             <view class="member_list">
				<checkbox-group class="block" @change="checkboxChange">
					<view class="list" v-for="(item,index) in checkboxData" :key="item.value">
						<!-- 复选框 -->
						<view class="" style="margin-right: 20rpx;">
							<checkbox :value="String(item.value)" :checked="item.checked" />
						</view>
						<view class="img_box">
							<image src="../../static/tupian.jpg" mode=""></image>
						</view>
						<view class="">
							<view class="" style="">
								花
							</view>
							<view class="">
								消费0次 0.00元 从未消费
							</view>
							<view class="" style="color: #FF6633;">
								3天后生日
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>

             <view class="bottom_box">
					<checkbox-group @change="isChecked">
						<label>
							<checkbox value="all" :checked="allCheck"></checkbox> 全选
						</label>
					</checkbox-group>
					<view class="sign" v-if="checkedLength!=0">
						{{checkedLength}}
					</view>
					<view class="right_message">
						<view class="" @click="sendMessage">
							发送消息
						</view>
						<view class="" @click="sendGoods">
							发送商品
						</view>
						<view class="" @click="sendEvent">
							发送活动
						</view>
					</view>
				</view>

js部分

export default {
		data() {
			return {
				number: 3,
				tabCurrentIndex: 0,
				checkboxData: [{
						'value': 0,
						'label': '选项一'
					},
					{
						'value': 1,
						'label': '选项二'
					},
					{
						'value': 2,
						'label': '选项三'
					},
					{
						'value': 3,
						'label': '选项四'
					}
				],
				dataDay: [{
					state: 0,
					text: '全部',
				}, {

					state: 1,
					text: '今天消费',
				}, {

					state: 2,
					text: '昨天消费',
				}, {

					state: 3,
					text: '近七天消费',
				}],
				allCheck: false,
				checkedLength: 0
			};
		},
		methods: {
			// 复选框选中
			checkboxChange: function(e) {
				this.checkedLength = e.detail.value.length
				this.checkboxData.forEach(el => {
					el.checked = false
				})
				e.detail.value.forEach(el => {
					this.checkboxData[el].checked = true
				})

				if (e.detail.value.length == this.checkboxData.length) {
					this.allCheck = true
				} else {
					this.allCheck = false
				}
			},
			// 全选
			isChecked: function(e) {

				if (this.allCheck == false) {
					console.log(this.allCheck)
					this.checkboxData.forEach(el => {
						el.checked = true
					})
					this.checkedLength = this.checkboxData.length
					this.allCheck = true
				} else {
					this.checkboxData.forEach(el => {
						el.checked = false
					})
					this.checkedLength = 0
					this.allCheck = false
				}
			}
		}
	}
</script>