uniapp复选框全选（基于colorui组件）

说明：本案例的样式基于colorui组件库 感兴趣的⼩伙伴可以看下教程 或者，顺便再分享下html

全选

js

// 复选框循环的数组checkbox: [{

value: 'A',//绑定的value值

checked: false,//默认选中状态：未选中},{

value: 'B',

checked: false,},{

value: 'C',

checked: false,},{

value: 'd',

checked: false,},{

value: 'e',

checked: false,},{

value: 'f',

checked: false,},{

value: 'g',

checked: false,},{

value: 'h',

checked: false,}],

checkedArr: [],//存放选中的值//复选框选中的值

allChecked: false,//全选操作时⽤的参数，⽤于判断是否全选或者全不选

methods

CheckboxChange(e) {

this.checkedArr = e.detail.value;

console.log(\"--单个选中--\ // 如果选择的数组中有值，并且长度等于列表的长度，就是全选

if (this.checkedArr.length > 0 && this.checkedArr.length == this.checkbox.length) { this.allChecked = true; } else {//否则就是全不选 this.allChecked = false; }},

selectAll(e) {

// console.log(e)

let chooseItem = e.detail.value; // 全选

if (chooseItem[0] == 'all') { this.allChecked = true;

for (let item of this.checkbox) { let itemVal = String(item.value);

if (!this.checkedArr.includes(itemVal)) { this.checkedArr.push(itemVal); } }

this.num = this.checkedArr.length console.log(this.checkedArr) } else {

// 取消全选

this.allChecked = false; this.checkedArr = []; this.num = 0

}},

效果图