checkbox-group组件，微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox-group.html
注意：
checkbox-group与checkbox来实现全选和全不选功能，checkbox是复选框，可以选取多个成员。
-
checkbox-group多项选择器，内部多个checkbox组成
在checkbox和checkbox-group中，都是由checked来控制是否选中的状态，所以在单个的checkbox中，我们在渲染数据列表的时候，里面肯定有一个值是用来控制checked是否被选中的状态（以下是的数据列表中,每一个数组成员的state的值为0表示未选中，1表示选中的状态）
image.png
而全选按钮可以用一个自定义变量来控制，当所有的都被选中时将这个变量变成选中，否则反之。
image.png
//wxml静态编写布局
-
bindchange是checkbox-group的一个默认事件，用来监听checkbox的变化 - 当被选中时，
e.detail.value中就会出现选中的复选框中绑定的value值 - 渲染出列表数据，并且将
checked和value值绑定 - 将全选按钮的
checked绑定，初始时是不选中的状态
<checkbox-group class="list" bindchange="selCheckbox">
<view wx:for="{{list}}" wx:key="index" class="item">
<checkbox checked="{{item.state}}" value="{{item.name}}"/>
<view class="text">{{item.name}}</view>
</view>
</checkbox-group>
<checkbox-group bindchange="allCheckbox">
<view class="all-item">
<checkbox checked="{{checked}}" value="全选"/>
<view>全选</view>
</view>
</checkbox-group>
//wxss编写布局样式
.list{
margin: 40rpx;
}
.item{
margin: 20rpx;
display: flex;
}
.text{
margin-left: 20rpx;
}
.all-item{
display: flex;
}
//js编写单选和恶全选和全不选的逻辑
- 定义页面初始数据
- every() 数组成员都符合条件才返回true，只要有一个不符合就返回false
- 如果是被选中的话，e.detail.value会有选中所绑定的Value值，没有选中就没有该成员绑定的value值
// pages/select/select.js
Page({
/**
* 页面的初始数据
*/
data: {
//全选按钮绑定的选中的变量状态
checked:false,
//数据列表
list:[
{
name:'水果',
state:0
},{
name:'蔬菜',
state:0
},{
name:'百货',
state:0
},{
name:'数码',
state:0
},{
name:'服装',
state:0
},
]
},
selCheckbox(e){
let newList = this.data.list
//选中的成员所绑定的value值
let values = e.detail.value
for(let i=0;i<newList.length;i++){
//判断选中的values中是否包含它，包含就改变它的状态state
let str = values.includes(newList[i].name)
newList[i].state = str ? 1: 0
this.setData({
list:newList
})
}
//every()数组成员中都符合条件的时候才返回true，只要有一个不符合就返回False
let checked = this.data.list.every(item=>item.state == 1)
this.setData({
checked
})
},
allCheckbox(e){
//判断如果全部都选中的情况下，state都是为1，符合这个条件全选就选中，反正只要有一个不是就不选中
let allList = this.data.list
for(let i=0;i<allList.length;i++){
//如果全选按钮被选中的话，e.detail.value中会有绑定的value的值，没有被选中的话就是空的，可以用这个来进行判断是否被选中的状态下
allList[i].state = e.detail.value.length>0?1:0
}
this.setData({
list:allList
})
}
})
//初始效果
image.png
//单选某一个或多个
image.png
//单选每一个的时候，全被选中，那全选按钮自动被选中，但是只要有一个没有被选中，全选按钮就自动不被选中（和单选中全选按钮的效果一样）
image.png
//在全选按钮被选中的时候，所有的都会被选中，但是全选状态下，我再取消全选，所有的由都不选中了，就实现了全不选的效果
image.png
