uniapp-微信小程序 实现多选功能

使用的是uniapp 的checkbox-group   

uniapp-checkboxhttps://uniapp.dcloud.net.cn/component/checkbox.html#checkbox-group

HTML部分： checked 是来判断是否选中的 需要绑定一个布尔值 

<checkbox-group @change="checkboxChange($event, findex,item.id)">
	<checkbox class="mycheck" :checked="item.checked" :value="findex" color="#fff" />
</checkbox-group>

JS部分  （如果 e.detail.value.length > 0  则说明被选中了）

			// 复选框
			checkboxChange(e, index, id) {
				// console.log(e,index,id)
				this.$set(this.tasklistArr[index], 'checked', e.detail.value.length > 0)
				if (e.detail.value.length > 0) {
					this.selectedArr.push(id) //添加id到选择的数组中
					if (this.selectedArr.length === this.tasklistArr.length) {
						this.selectAll = true;
					}
					// console.log(this.selectedArr)
				} else {
					this.selectedArr.splice(this.selectedArr.indexOf(id), 1) // 把id从数组中删除
					if (this.selectedArr.length !== this.tasklistArr.length) {
						this.selectAll = false;
					}
					// console.log(this.selectedArr)
				}
				// console.log(this.tasklistArr)
			},
			// 全选
			checkedAll(e) {
				this.selectedArr = []
				if (e.detail.value.length > 0) {
					this.selectAll = true
					this.tasklistArr.map(val => {
						this.$set(val, 'checked', true)
						this.selectedArr.push(val.id)
					})
					console.log(this.selectedArr)
				} else {
					this.selectAll = false
					this.tasklistArr.map(val => {
						this.$set(val, 'checked', false)
					})
					console.log(this.selectedArr)
				}
			},

 CSS部分：CSS必须写在app.vue文件下（如果想更改样式的话）

		//自定义checkbox的样式（ 元素使用的时候就是使用类名：mycheck）
		checkbox.mycheck .wx-checkbox-input,
		checkbox.mycheck .uni-checkbox-input {
			width: 36rpx !important;
			height: 36rpx !important;
			background-color: #D8D8D8;
			border-radius: 18rpx;
			border: 2rpx solid #C0C4CC;
		}
		// 选中后的 	样式 
		checkbox.mycheck .uni-checkbox-input-checked,
		checkbox.mycheck .wx-checkbox-input-checked{
			background-color: #12A182;
		}