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

前言概述

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

实现过程

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)}
})

微信小程序实现单选、全选功能相关推荐

微信小程序checkbox的全选以及所有checkbox选中之后的全选
微信小程序checkbox的全选以及所有checkbox选中之后的全选微信小程序checkbox的全选以及所有checkbox选中之后的全选第一次写,软件都不懂,直接把代码拷过来了模板 WXML ...
微信小程序自定义单选复选按钮组的实现(用于实现购物车产品列表功能)
(一)单选按钮组模型图如下: index.js Page({data: {parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: ...
微信小程序筛选侧边栏全选与反全选
小程序中经常会有筛选侧边栏的按钮,今天用原生小程序实现这一功能. 1.wxml核心代码 <button class="filterBtn" bindtap="tra ...
微信小程序radio单选框如何修改宽高及选中样式
之前写过关于多选框设置样式的办法,其实与单选框设置的方法一样,唯一不同的是,在css样式里,/* 选中后的背景样式 (红色背景无边框可根据UI需求自己修改) */的下面定义的css需要加上!im ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...

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

前言概述

实现过程

微信小程序实现单选、全选功能相关推荐

最新文章

热门文章