微信小程序实现-单选-以及全选功能。

html：

  <view class="list"><view class="operation-buttons"><button class="btn add-btn" bindtap="addNew">新增</button><button class="btn delete-btn" bindtap="deleteSelected">删除</button><button class="btn publish-btn" bindtap="publish">发布</button><button class="btn task-btn" bindtap="assignTask">异常任务</button></view><!-- 说明文字 --><view class="note"><text class="star">*</text>以下"时间"为开始时间</view><!-- 列表头部（带全选） --><view class="list-header"><view class="list-item header"><checkbox-group bindchange="onCheckAllChange"><checkbox checked="{{allChecked}}" value="all"class="checkbox"/></checkbox-group></view><view class="header-item">车牌号</view><view class="header-item">班次</view><view class="header-item">套班</view><view class="header-item">时间</view></view><view class="vehicle-list"><view class="list-container"><checkbox-group bindchange="onItemCheck"><view class="vehicle-item" wx:for="{{items}}" wx:key="id"><checkbox checked="{{item.checked}}" value="{{item.id}}"class="item-checkbox"/><view class="item-content">{{item.plateNumber}}</view><view class="item-content">{{item.shiftTypeStr}}</view><view class="item-content">{{item.mainShiftFlagStr}}</view><view class="item-content">{{item.beginTime}}</view></view></checkbox-group></view></view></view>

js:

const requestApi = require('../../../../utils/request.js');
const app = getApp();
Page({data: {items: [],//渲染的数据// 全选状态allChecked: false,// 选中的项目selectedItems: [],isFilterShow: false,routeName:'',startPoint:'',endPoint:'',pageNum:1,routeid:'',date:'',endDate:'',operationDateArray:["星期一","星期二","星期三","星期四","星期五"],},onLoad(options) {this.setData({routeName: options.routeName?options.routeName:'',startPoint: options.startPoint?options.startPoint:'',endPoint: options.endPoint?options.endPoint:'',routeid: options.id});const newModel = this.data.items.map(item => {return {...item,checked: false};});this.setData({items: newModel});this.getList();},getList: function () {},// 全选框状态改变onCheckAllChange(e) {const checked = e.detail.value.includes('all');console.log('全选状态改变:', checked);// 更新所有选项的选中状态const updatedItems = this.data.items.map(item => ({...item,checked: checked}));// 更新数据this.setData({allChecked: checked,items: updatedItems,selectedItems: checked ? [...updatedItems] : []});},// 列表项状态改变onItemCheck(e) {const selectedIds = e.detail.value;console.log('选中的ID:', selectedIds);// 更新每个选项的选中状态const updatedItems = this.data.items.map(item => ({...item,checked: selectedIds.includes(item.id)}));// 检查是否所有选项都被选中const allChecked = updatedItems.every(item => item.checked);// 获取选中的项目const selectedItems = updatedItems.filter(item => item.checked);// 更新数据this.setData({items: updatedItems,allChecked: allChecked,selectedItems: selectedItems});},deleteSelected() {if (this.data.selectedItems.length === 0) {wx.showToast({title: '没有选中任何删除项',icon: 'none'});return;}const plateNumber = this.data.selectedItems.map(item => item.plateNumber).join(', ');const shanchuid = this.data.selectedItems.map(item => item.id).join(', ');wx.showModal({title: '提示',content: `确定要删除选中的 ${plateNumber} 辆车吗？`,success: function (res) {if (res.confirm) { } else { console.log('用户点击取消')}}})},//确定按钮confirmDispatch(){if (this.data.selectedItems.length === 0) {wx.showToast({title: '没有选中任何项',icon: 'none'});return;}const shanchuid = this.data.selectedItems.map(item => item.id).join(', ');console.log(shanchuid,'8552221');var that = this;wx.showLoading({title: '加载中...',});requestApi.post("", {ids:[shanchuid],operationDateArray:this.data.operationDateArray, dateTimeValue:[this.data.endDate,this.data.date],}).then(res => {wx.showToast({title: '发布成功',icon: 'success',duration: 2000})this.getList();}).catch(err => {wx.hideLoading();wx.hideNavigationBarLoading();wx.stopPullDownRefresh();wx.showToast({title: '数据获取异常',icon: 'none',duration: 3000,});});},publish() {const isShow = !this.data.isFilterShow;this.setData({ isFilterShow: isShow });},hideModal(){this.setData({isFilterShow: false});},bindDateChange(e) {this.setData({date: e.detail.value});},bindendDateChange(e){this.setData({endDate: e.detail.value});},addNew(){wx.navigateTo({url: '../addShift/addShift',})},assignTask(){wx.navigateTo({url: '../exceptionalTask/exceptionalTask',})},
});

样式：

.container {padding: 16rpx;
}/* 线路信息样式 */
.route-info {width: 95%;background-color: white;border-radius: 14rpx;padding: 20rpx;margin-bottom: 20rpx;box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}.route-title {font-size: 34rpx;font-weight: bold;color: #333;margin-bottom: 16rpx;
}.route-details {display: flex;flex-direction: column;gap: 12rpx;
}.route-item {display: flex;font-size: 30rpx;
}.label {font-size: 35rpx;color: #3f3f3f;min-width: 120rpx;
}.value {color: #333;flex: 1;
}/* 操作按钮样式 */
.operation-buttons {display: flex;gap: 16rpx;flex-wrap: wrap;padding: 20rpx 20rpx 0rpx 20rpx;
}.btn {flex: 1;min-width: 160rpx;height: 75rpx;line-height:75rpx;text-align: center;border-radius: 50rpx;border: none;padding: 0;font-weight: 400;font-size: 33rpx;color: #FFFFFF;
}
.add-btn {background-color: #1A73E8;
}.delete-btn {background-color: #F44336;
}.publish-btn {background-color: #4CAF50;
}.task-btn {background-color: #FF9800;
}/* 说明文字样式 */
.note {width: 100%;color: #D90B0B;font-size: 30rpx;margin-bottom: 20rpx;padding-left: 45rpx;
}.star {color: #F44336;
}/* 列表样式 */
.list {width: 100%;background-color: white;border-radius: 14rpx;
}
.list-header {display: flex;align-items: center;padding: 0 20rpx;height: 80rpx;font-size: 28rpx;font-weight: bold;color: #333;
}.select-all {margin-right: 16rpx;
}.header-item {flex: 1;text-align: center;font-family: Source Han Sans CN;font-weight: bold;font-size: 33rpx;color: #000000;line-height: 50rpx;
}.vehicle-list {width: 100%;background-color: white;border-radius: 0 0 8rpx 8rpx;margin-bottom: 20rpx;
}.vehicle-item {display: flex;align-items: center;padding: 0 20rpx;height: 90rpx;border-bottom: 1px solid #eee;font-size: 33rpx;color: #333;
}.vehicle-item:last-child {border-bottom: none;
}.item-checkbox {margin-right: 16rpx;
}.item-content {color: #000000;flex: 1;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
/* 弹出层和筛选区域样式 */
.modal-mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);
}
.filter-area {position: fixed;background-color: #fff;width: 90%;height: 40%;z-index: 999;top: 40%;left: 50%;transform: translate(-50%, -50%);border-radius: 20rpx;text-align: center;padding-top: 20rpx;
}
.modal-form-item {display: flex;align-items: center;margin: 20rpx;padding: 10rpx;background-color: #f5f7f9;
}
.modal-label {width: 217rpx;font-size: 35rpx;color: #000;
}
.filter-picker {flex: 1;padding: 10rpx;border-radius: 5rpx;font-size: 35rpx;/* border: 1rpx solid #eee; */
}
.modal-btn-group {display: flex;justify-content: flex-end;margin-top: 40rpx;
}
.modal-btn {width: 280rpx !important;height: 80rpx;line-height: 50rpx;text-align: center;margin-left: 20rpx;
}
.cancel-btn {background-color: #fff;border: 1rpx solid #ccc;
}
.confirm-btn {background-color: #007aff;color: #fff;
}
.module-icon {width: 70rpx;height: 70rpx;margin-right:12rpx;/* margin-top:15rpx; */
}