微信小程序实现全选,半选功能

实现效果

代码

• 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

项目地址—包含更多功能组件插件（持续更新）

微信小程序各种基础及功能组件总结