一、问题描述

在使用checkBox组件时，先点击全选，然后点击某一个或者几个选项不被选中，再点击全选，会发现这几项将无法被选中；

如下图：

二、问题分析

先来看看实现该部分的源代码：

html部分：

<view class="openLine">
			<view><text class="iconfont icon-fenzu1" style="margin-right:20rpx;"></text>设备</view>
			<view>
				<checkbox-group @change="allCheckChange">
                    <label>
                        全选<checkbox value="all" :checked="allCkeck" style="transform:scale(0.7)" />
                    </label>
                </checkbox-group></view>
			<view class="iconfont icon-arrow-right" @click="openLine"></view>
		</view>
		<view v-show="isLineShow">
			 <checkbox-group @change="checkboxChange">
				<label class="labelBox" v-for="item1 in lines" :key="item1.id">
					<view>
						<checkbox :value="item1.id" :checked="item1.checked" style="transform:scale(0.7)" />
					</view>
					<view class="groupText">{{item1.name}}</view>
					<view class="groupText terminal">所属设备：{{item1.terminal}}</view>
					<view class="result">{{item1.result}}</view>
				</label>
			</checkbox-group>
		</view>

js部分：

从下面代码分析，大意为

全选：判断选择的全选框是否被选中，若选中，则遍历所有数据数组，状态全部设置为选中状态true，并且保存选中ID，否则全部设置为false

多选：选中的多选数量和该数据数组长度相等，则为全选，否则，不为全选的选中状态

// 全选
			allCheckChange(e) {
				this.selectId = []
				if(e.detail.value.length > 0){
					this.allCkeck = true
					for (var i = 0; i < this.lines.length; i++) {
						this.$set(this.lines[i],'checked',true)
						if (!this.lines[i].checked) {
							this.$set(this.lines[i],'checked',true)
						}
						this.selectId.push(this.lines[i].id)
					}
				}else{
					this.allCkeck = false
					this.selectId = []
					for (var i = 0; i < this.lines.length; i++) {
						this.$set(this.lines[i],'checked',false)
					}
				}
			},
// 选择多选框
			checkboxChange(e) {
				this.selectId = e.detail.value
				if (e.detail.value.length === this.lines.length) {
					this.allCkeck = true
				} else {
					this.allCkeck = false
				}
			},

从上面逻辑好像并没有什么问题，如果单从多选的情况来看，不设置每个数据的check状态为true或者false都没什么问题，不影响操作，但是细想，如果不设置这个状态，在全选和多选的切换过程中，既有可能导致选中状态的混乱，我们再看官网的使用案例来看：

三、解决方法

如上分析，我们得出解决方法，尝试加入如上代码，发现果然是该原因：

多选改为如下代码：

// 选择多选框
			checkboxChange(e) {
				this.selectId = e.detail.value
				if (e.detail.value.length === this.lines.length) {
					this.allCkeck = true
				} else {
					this.allCkeck = false
				}
				var values = e.detail.value
				for (var i = 0; i < this.lines.length; i++) {
					if(values.includes(this.lines[i].id)) {
						this.$set(this.lines[i],'checked',true)
					} else {
						this.$set(this.lines[i],'checked',false)
					}
				}
			},