uni-app中checkbox-group实现全选功能

uni-app中checkbox-group实现全选功能

功能描述：

点击全选框，选项全被选中，再次点击，选项全不被选中


全选框选中状态下，取消任一选项，全选框不被选中，并且在全选框不被选中的状态下，如果选项全都被选择，全选框会变为选中状态

---

代码块：

<template>
	<view class="container">
		<text>请选择你喜欢的漫画</text>
		<!-- 全选 -->
		<checkbox-group name="allCheck" @change="changeAll">
			<label>
				<checkbox :value="allCheck.value" :checked="allCheck.checked"/><text>{{allCheck.name}}</text>
			</label>
		</checkbox-group>
		<!-- 每项选择 -->
		<checkbox-group name="check" @change="changeCheck" class="check">
			<!-- 注意v-for不要设在checkbox-group上 -->
			<label v-for="(item, index) in content" :key="item.id">
				<checkbox :value="item.value" :checked="item.checked"/><text>{{item.name}}</text>
			</label>
		</checkbox-group>
	</view>
</template>

<script>
	export default {
		data () {
			return{
				allCheck : {
					name : '全选',
					value : 'all',
					checked : false	
				},
				content : [
					{
						name : '《某天成为公主》',
						value : '《某天成为公主》',
						id : 1,
						whether : true
					},
					{
						name : '《当神不让》',
						value : '《当神不让》',
						id : 2,
						whether : true
					},
					{
						name : '《海贼王》',
						value : '《海贼王》',
						id : 3,
						whether : true
					}
				]
			}
		},
		methods:{
		    // 全选
			changeAll : function(e) {
				if(e.detail.value.length == 0) {
					this.content.map(item => this.$set(item, 'checked', false));
					this.$set(this.allCheck, 'checked', false);
				}else{
					this.content.map(item => this.$set(item, 'checked', true));
					this.$set(this.allCheck, 'checked', true);
				}
			},
			// 多选
			changeCheck : function(e) {
				var items = this.content;
				var len = this.content.length;
				var values = e.detail.value;
				// console.log(values)
				for(var i = 0; i < len; i++) {
					var item = items[i];
					if(values.includes(item.value)){
						this.$set(item, 'checked', true);
					}else{
						this.$set(item, 'checked', false);
					}
				}
				// 判断选中状态
				var arr = [];
				this.content.forEach(item => item.whether == true ? arr.push(item) : '');
				var isAll = arr.every(item => item.checked == true);
				isAll ? this.$set(this.allCheck, 'checked', true) : this.$set(this.allCheck, 'checked', false)
			}
		}
	}
</script>

<style>
	.container {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.check {
		display: flex;
		flex-direction: column;
	}
	page {
		background-color: #f1e4ff;
	}
	
</style>

---

细节注意：

1.v-for不要写到checkbox-group标签上，而应该写到它的子级label上，不然取到的e.detail.value只是一个单选的值，而不是多选的值
2.this.$set的使用
3.数组的map、every、some等方法
4.举一反三，可以根据自己的需求去判断逻辑然后改写这个代码，都是通用的