wechatApplet - 复选连选

1、html 部分

<view class="checkbox_box"> <checkbox-group> <label class="check_box_item" wx:for="{{timeData}}" wx:key="index" bindtap="checkboxLabel" data-item="{{item}}" data-index="{{index}}"> <view class="order_check_box"> <view class="order">{{(index+1)<10?'0'+(index+1):index+1}}{index}}" disabled="{{item.status == 0}}" checked="{{item.checks}}" /> {item.value}}{showSubmit}} /**
   * 页面的初始数据
   */ data: { // 时间面板数据 timeData: [{ id: 1, status: 0, checks: false, value: '06:00-06:30' }, { id: 2, status: 0, checks: false, value: '07:00-07:30' }, { id: 3, status: 0, checks: false, value: '08:00-08:30' }, { id: 4, status: 1, checks: false, value: '09:00-09:30' }, { id: 5, status: 1, checks: false, value: '10:00-10:30' }, { id: 6, status: 1, checks: false, value: '11:00-11:30' }, { id: 7, status: 1, checks: false, value: '12:00-12:30' }, { id: 8, status: 1, checks: false, value: '13:00-13:30' }, { id: 9, status: 1, checks: false, value: '14:00-14:30' }, { id: 10, status: 1, checks: false, value: '15:00-15:30' }, { id: 11, status: 1, checks: false, value: '16:00-16:30' }, { id: 12, status: 1, checks: false, value: '17:00-17:30' }, { id: 13, status: 1, checks: false, value: '18:00-18:30' }, { id: 14, status: 0, checks: false, value: '19:00-19:30' }, { id: 15, status: 0, checks: false, value: '20:00-20:30' }, ], minI: null, maxI: null, // 展示的数据 showSubmit: '请选择时间' }, // 收集复选框数据 checkboxLabel({ currentTarget }) { let { item, index } = currentTarget.dataset; let minI = this.data.minI; let maxI = this.data.maxI; let timeData = this.data.timeData; // 禁选 if (timeData[index].status == 0) { return false } // 第一次点击的时候 if (minI == null && maxI == null) { this.setData({ minI: index, maxI: index, [`timeData[${index}].checks`]: !item.checks }); return false; } if (index < minI) { this.setData({ minI: index, }); } if (index > minI && index < maxI) { this.setData({ maxI: index - 1, }); for (let i = this.data.maxI + 1; i < timeData.length; i++) { this.setData({ [`timeData[${i}].checks`]: false }) } } if (index > maxI) { this.setData({ maxI: index, }); } if (index == minI) { this.setData({ minI: index + 1, [`timeData[${index}].checks`]: false }) } if (index == maxI) { this.setData({ maxI: index - 1, [`timeData[${index}].checks`]: false }) } // 这里是给选中和连选的数据赋值 // 也就是修改 data 中的原数据 // 仔细看循环条件就不难理解了 for (let i = this.data.minI; i <= this.data.maxI; i++) { this.setData({ [`timeData[${i}].checks`]: true }) } // 初始化 // 这是在经过一波操作后， // 所有选框都是未选中状态后再次选择时 if (timeData.every(_ => _.checks == false)) { this.setData({ minI: null, maxI: null, showSubmit:'请选择时间' }); } }, // 保存 submit() { let data = []; let showData = ''; this.data.timeData.forEach(item => { if (item.checks) { data.push({ id: item.id, value: item.value }); } }); if (data.length == 0) { showData = '请选择时间'; wx.showToast({ title: '请选择', icon: 'none', duration: 1500 }) } else if (data.length == 1) { showData = '您选择的是 ' + data[0].value + ' 时间段'; } else { let startStr = data[0].value.split('-')[0]; let endStr = data[data.length - 1].value.split('-')[1]; showData = `您选择的是 ${startStr}-${endStr} 时间段`; } this.setData({ showSubmit: showData }); }, /**
   * 生命周期函数--监听页面加载
   */ onLoad: function (options) { }, /**
   * 生命周期函数--监听页面初次渲染完成
   */ onReady: function () { }, /**
   * 生命周期函数--监听页面显示
   */ onShow: function () { }, /**
   * 生命周期函数--监听页面隐藏
   */ onHide: function () { }, /**
   * 生命周期函数--监听页面卸载
   */ onUnload: function () { }, /**
   * 页面相关事件处理函数--监听用户下拉动作
   */ onPullDownRefresh: function () { }, /**
   * 页面上拉触底事件的处理函数
   */ onReachBottom: function () { }, /**
   * 用户点击右上角分享
   */ onShareAppMessage: function () { } }) 

3、Css 部分

.search_box { width: 100%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } .show_search { width: 360rpx; margin: 50rpx auto; box-shadow: 0 0 10rpx #888888; border-radius: 12rpx; line-height: 50rpx; font-size: 30rpx; box-sizing: border-box; padding: 10rpx; } .input_btn_box { display: flex; justify-content: center; align-items: center; } .input_text { border: 1px solid #888888; width: 300rpx; height: 50rpx; font-size: 30rpx; border-radius: 10rpx; padding: 0 16rpx; box-sizing: border-box; } .img_text_box { display: flex; justify-content: center; align-items: center; margin-left: 20rpx; box-shadow: 0 0 10rpx #666666; border-radius: 10rpx; background-color: #9FB6CD; padding: 16rpx; box-sizing: border-box; } .img_text_box>image { width: 36rpx; height: 30rpx; } .img_text_box>view { color: #FFFFFF; margin-left: 10rpx; font-size: 26rpx; font-weight: 600; } 

4、演示