实现效果
代码
index.js Page({ data: { list: [], //半选状态全选按钮 checkedList: [] }, onLoad() { //进入页面获取数据 this.getList() }, getList() { //可以发送请求获取数据 let checkedList = this.data.checkedList let list = [{ id: 1, name: '歌曲', isSelected: true, arr: [{ id: 11, name: '答案', isSelected: true }, { id: 12, name: '彩虹', isSelected: true }, { id: 13, name: '情非得以', isSelected: true }, ] }, { id: 2, name: '小说', isSelected: false, arr: [{ id: 21, name: '雪中悍刀行', isSelected: false }, { id: 22, name: '异常生物见闻录', isSelected: true }, { id: 23, name: '唐砖', isSelected: false }, ] }, { id: 3, name: '地点', isSelected: false, arr: [{ id: 31, name: '北京', isSelected: false }, { id: 32, name: '上海', isSelected: false }, { id: 33, name: '杭州', isSelected: false }, ] }, ] //渲染数据时 判断是否半选 list.forEach(v => { let flag = true v.arr.forEach(arrItem => { flag = arrItem.isSelected ? false : flag }) if (!flag && !v.isSelected) { checkedList.push(v.id) } }) this.setData({ list, checkedList }) }, //点击 全选按钮 selectAll(e) { let { list, checkedList } = this.data list.forEach(v => { if (v.id === e.currentTarget.dataset.state.id) { v.isSelected = !v.isSelected if (!v.isSelected) { checkedList.includes(v.id) ? checkedList=checkedList.filter(check => check != v.id) : "" } v.arr.forEach(e => { e.isSelected = v.isSelected }) } }) this.setData({ list, checkedList }) }, //checkbox-group 事件 被选中checkbox value 的数据 组成的数组 change(e) { let id = e.currentTarget.dataset.id let value = e.detail.value let list = this.data.list let checkedList = this.data.checkedList console.log(checkedList) list.forEach(v => { if (v.id === id) { //设置 全选按钮 v.isSelected = v.arr.length === value.length ? true : false if (v.isSelected) { checkedList.includes(id) ? checkedList=checkedList.filter(v => v != id) : '' } else if (!v.isSelected && value.length) { checkedList.includes(id) ? '' : checkedList.push(id) } else if (!v.isSelected && !value.length) { checkedList.includes(id) ? checkedList=checkedList.filter(v => v != id) : '' } //设置 单个按钮 v.arr.filter(arrItem => arrItem.isSelected = false) v.arr.forEach(arrItem => { value.forEach(val => { arrItem.isSelected = arrItem.id == val ? true : arrItem.isSelected }) }) } }) this.setData({ list, checkedList }) }}) index.wxml <view class="container"><view class="title">微信小程序实现全选,半选</view><view class="content" wx:for="{{list}}" wx:key="id"><view class="allBtn"><checkbox checked="{{item.isSelected}}" bindtap="selectAll" data-state="{{item}}" class="{{tools.inArray(checkedList,item.id)&&!item.isSelected?'half':''}}">{{item.name}}</checkbox></view><checkbox-group bindchange="change" data-id="{{item.id}}"><checkbox checked="{{func.isSelected}}" wx:for="{{item.arr}}" wx:key="id" wx:for-item="func" value="{{func.id}}" >{{func.name}}</checkbox></checkbox-group></view></view><!-- 引入wxs 检测数组中是否存在某元素 --><wxs src="../wxs/inArray.wxs" module="tools" /> index.wxss .content{ padding: 20rpx;}.title{ width: 100%; text-align: center;}.allBtn{ margin-bottom: 20rpx;}.half .wx-checkbox-input::before { content: ''; /*CSS伪类用法*/ position: absolute; /*定位背景横线的位置*/ top: 50%; left: 50%; background: #09BB1E; /*宽和高做出来的背景横线*/ width: 30rpx; height: 2rpx; transform: translateX(-15rpx) translateY(-1rpx);} inArray.wxs function inArray(arr,val){ return arr.indexOf(val)>-1}module.exports.inArray=inArray 项目地址—包含更多功能组件插件（持续更新）
微信小程序各种基础及功能组件总结