示例简介

本文介绍如何实现微信小程序的单选和全选功能：

实现过程

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>

.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: 32rpx;
}
.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: 2,
        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: 2,
        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: 2,
        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: 2,
        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)
  }
})