前言概述
本文介绍微信小程序实现单选、全选功能，效果如下：
实现过程
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)
}
})