微信小程序实现单选、全选功能

心已赠人 2022-10-09 03:26 779阅读 0赞

### 前言概述 ###

本文介绍微信小程序实现单选、全选功能，效果如下：

![20210623180036255.gif][]

### 实现过程 ###

1、先实现页面效果，文件\*.wxml和\*.wxss代码如下：

<view class="container">
      <view class="order-mes">
        <checkbox-group class="table">
          <view class="tr">
            <view class="th">日期</view>
            <view class="th"><checkbox checked="{
       {breakfastAll}}" value="breakfastAll" bindtap="selectbreakfastAll" data-type="breakfast" />早</view>
            <view class="th"><checkbox checked="{
       {lunchAll}}" value="lunchAll" bindtap="selectlunchAll" data-type="lunch" />午</view>
            <view class="th last"><checkbox checked="{
       {dinnerAll}}" value="dinnerAll" bindtap="selectdinnerAll" data-type="dinner" />晚</view>
          </view>
          <view class="tr" wx:for="{
       {orders}}" wx:key="id">
            <view class="td first">
              <view class="serial">{
       {item.date.day}}</view>
              <view class="week">{
       {item.date.week}}</view>
            </view>
            <view class="td {
       {item.breakfast.checked ? '' : 'gray'}}"><checkbox value="{
       {item.breakfast.value}}" checked="{
       {item.breakfast.checked}}" bindtap="select" data-index="{
       {index}}" data-type="breakfast"  />{
       {item.breakfast.checked ? '已订' : '未订'}}</view>
            <view class="td {
       {item.lunch.checked ? '' : 'gray'}}"><checkbox value="{
       {item.lunch.value}}" checked="{
       {item.lunch.checked}}" bindtap="select" data-index="{
       {index}}" data-type="lunch"  />{
       {item.lunch.checked ? '已订' : '未订'}}</view>
            <view class="td last {
       {item.dinner.checked ? '' : 'gray'}}"><checkbox value="{
       {item.dinner.value}}" checked="{
       {item.dinner.checked}}" bindtap="select" data-index="{
       {index}}" data-type="dinner"  />{
       {item.dinner.checked ? '已订' : '未订'}}</view>
          </view>
        </checkbox-group>
      </view>
    </view>

page {
      font-size: 28rpx;
    }
    .table {
      border: 2rpx solid #ccc;
    }
    .table .tr {
      display: flex;
      border-bottom: 2rpx solid #ccc;
    }
    .table .tr:last-child {
      border-bottom: none;
    }
    .table .tr .th {
      background-color: #ccc;
      font-size: 30rpx;
    }
    .table .tr .th {
      border-right: 2rpx solid #fff;
    }
    .table .tr .td {
      border-right: 2rpx solid #ccc;
      position: relative;
    }
    .table .tr .td.gray {
      color: #999;
    }
    .table .tr .th, .table .tr .td {
      flex: 1;
      text-align: center;
      padding: 20rpx 0;
    }
    .table .tr .th.last, .table .tr .td.last {
      border-right: none;
    }
    .table .tr .td.first {
      display: flex;
      justify-content: center;
      color: #666;
      padding: 0;
    }
    .table .tr .td.first .serial {
      border-right: 2rpx solid #ccc;
      padding: 20rpx 0;
      flex: 1;
      text-align: center;
    }
    .table .tr .td.first .week {
      padding: 20rpx 0;
      flex: 1;
      text-align: center;
    }
    .table .tr .th checkbox {
      transform: scale(0.8, 0.8);
      vertical-align: middle;
      margin-top: -8rpx;
    }
    .table .tr .td checkbox {
      transform: scale(3, 1.2);
      vertical-align: middle;
      margin-top: -14rpx;
      position: absolute;
      top: 15px;
      left: 38px;
      opacity: 0;
    }

2、接下来实现交互逻辑，文件\*.js代码实现如下：

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        breakfastAll: true,
        lunchAll: true,
        dinnerAll: true,
        orders: [{
          date: {
            day: 1,
            week: '周日'
          },
          breakfast: {
            checked: true,
            value: 1
          },
          lunch: {
            checked: true,
            value: 1
          },
          dinner: {
            checked: true,
            value: 1
          }
        }, {
          date: {
            day: 2,
            week: '周一'
          },
          breakfast: {
            checked: true,
            value: 1
          },
          lunch: {
            checked: true,
            value: 1
          },
          dinner: {
            checked: true,
            value: 1
          }
        }, {
          date: {
            day: 3,
            week: '周二'
          },
          breakfast: {
            checked: true,
            value: 1
          },
          lunch: {
            checked: true,
            value: 1
          },
          dinner: {
            checked: true,
            value: 1
          }
        }, {
          date: {
            day: 4,
            week: '周三'
          },
          breakfast: {
            checked: true,
            value: 1
          },
          lunch: {
            checked: true,
            value: 1
          },
          dinner: {
            checked: true,
            value: 1
          }
        }, {
          date: {
            day: 5,
            week: '周四'
          },
          breakfast: {
            checked: true,
            value: 1
          },
          lunch: {
            checked: true,
            value: 1
          },
          dinner: {
            checked: true,
            value: 1
          }
        }, {
          date: {
            day: 6,
            week: '周五'
          },
          breakfast: {
            checked: true,
            value: 1
          },
          lunch: {
            checked: true,
            value: 1
          },
          dinner: {
            checked: true,
            value: 1
          }
        }, {
          date: {
            day: 7,
            week: '周六'
          },
          breakfast: {
            checked: true,
            value: 1
          },
          lunch: {
            checked: true,
            value: 1
          },
          dinner: {
            checked: true,
            value: 1
          }
        }]
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {},
      // 全选早
      selectbreakfastAll: function (e) {
        let type = e.currentTarget.dataset.type;
        let status = !this.data.breakfastAll;
        this.selectAll(type, status);
        this.setData({
          breakfastAll: status
        });
      },
      // 全选午
      selectlunchAll: function (e) {
        let type = e.currentTarget.dataset.type;
        let status = !this.data.lunchAll;
        this.selectAll(type, status);
        this.setData({
          lunchAll: status
        });
      },
      // 全选晚
      selectdinnerAll: function (e) {
        let type = e.currentTarget.dataset.type;
        let status = !this.data.dinnerAll;
        this.selectAll(type, status);
        this.setData({
          dinnerAll: status
        });
      },
      // 全选函数
      selectAll: function (type, status) {
        let orders = this.data.orders;
        orders.map((item, index) => {
          item[type].checked = status;
        });
        // console.log(orders)
        this.setData({
          orders
        });
      },
      // 点击单选
      select: function (e) {
        let type = e.currentTarget.dataset.type;
        let currentIndex = e.currentTarget.dataset.index;
        let orders = this.data.orders;
        let total = 0;
        orders.map((item, index) => {
          if (index === currentIndex) {
            item[type].checked = !item[type].checked;
          }
        });
        orders.map((item, index) => {
          if (item[type].checked) {
            total = total + 1;
          }
        });
        let status = orders.length == total ? true : false;
        switch (type) {
          case 'breakfast':
            this.setData({
              breakfastAll: status
            });
            break;
          case 'lunch':
            this.setData({
              lunchAll: status
            });
            break;
          case 'dinner':
            this.setData({
              dinnerAll: status
            });
            break;
        }
        this.setData({
          orders
        });
        // console.log(orders)
      }
    })

![20210623180743869.jpg][]

[20210623180036255.gif]: /images/20221005/1c586f33bc734ee3957b2dea923d05fc.png
[20210623180743869.jpg]: /images/20221005/db8a0875bd0c45c7acdf191e82af196c.png