小程序添加表单页面跳转到多选全选页面(备份前端网)
creat
<view bindtap="selectLocation" class='add-cont'>
<view class='add-list'>
<view class='add-list-left'>打卡地点</view>
<view class='add-list-right'>{{location}}</view>
</view>
</view>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
onShow: function () { var selectStudent = app.globalData.selectStudent; var selectLocation = app.globalData.selectLocation; var selectdate = app.globalData.selectdate; console.log(selectStudent); console.log(selectLocation); console.log(selectdate); var student = ""; var location = ""; var date = ""; var reg = /,$/gi; if (selectStudent != null && selectStudent.length > 0) { for (var i = 0; i < selectStudent.length; i++) { if (selectStudent[i].checked) { student += selectStudent[i].name + "," ; } } } if (selectLocation != null && selectLocation.length > 0) { for (var i = 0; i < selectLocation.length; i++) { if (selectLocation[i].checked) { location += selectLocation[i].name + ","; } } } if (selectdate != null && selectdate.length > 0) { for (var i = 0; i < selectdate.length; i++) { if (selectdate[i].checked) { date += selectdate[i].name + ","; } } } this.setData({ student: selectStudent == null ?"请选择打卡学生":student.replace(reg, ""), location: selectLocation == null ? "请选择打卡地点" :location.replace(reg, ""), date: selectdate == null ? "请选择打卡日期" :date.replace(reg, "") }) },
selectLocation
js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// pages/manage/punch/selectStudent/index.js var app = getApp(); var host = app.data.server; var utils = require('../../../../utils/util.js') Page({ /** * 页面的初始数据 */ data: { selectLocation: [ { id: 1, name: "长安校区",details:"长安详情" }, { id: 2, name: "雁塔校区", details: "雁塔详情"}, { id: 3, name: "高新校区", details: "高新详情" }, ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getData(); }, getData: function () { wx.showLoading({ title: '加载中', }) var that = this; wx.request({ url: host + '/punch/getBuilding.json', method: 'GET', data: { miniSession: wx.getStorageSync("session") }, success: function (res) { if (res.statusCode == 200) { if (res.data.code == 0) { var d = res.data.data; console.log(d); that.setData({ selectLocation: d }) } else { utils.alert("抱歉", res.data.message + ''); } } else { utils.alert("抱歉", '服务器出错(' + res.statusCode + ')'); } }, fail: function () { utils.alert("抱歉", '请求失败!'); }, complete: function () { wx.hideLoading() } }) }, //全选择 checkAll: function (e) { var selectedAll; var s; selectedAll = this.data.selectedAllGrade; s = this.data.selectLocation; selectedAll = !selectedAll; if (selectedAll) { for (var i = 0; i < s.length; i++) { s[i].checked = true; } } else { for (var i = 0; i < s.length; i++) { s[i].checked = false; } } console.log(s); console.log(selectedAll); this.setData({ selectLocation: s, selectedAllGrade: selectedAll }); }, checkOneGrade: function (e) { var selectLocation = this.data.selectLocation; var ids = e.detail.value; console.log(ids); console.log(selectLocation); for (var i = 0; i < selectLocation.length; i++) { selectLocation[i].checked = false; console.log(ids.length); for (var j = 0; j < ids.length; j++) { if (selectLocation[i].id == ids[j]) { selectLocation[i].checked = true; break; } } } console.log(selectLocation); this.setData({ selectLocation: selectLocation }); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { app.globalData.selectLocation = this.data.selectLocation; }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!--pages/manage/punch/selectStudent/index.wxml--> <view class='allbody' bindtouchmove='move'> <view class="weui-tab__panel"> <!-- 选项卡1 --> <view class="" > <checkbox-group bindchange="checkAll" data-type='grade'> <label class="weui-cell weui-check__label"> <checkbox class="weui-check" value="0" checked="{{selectedAllGrade}}" /> <view class="weui-cell__hd weui-check__hd_in-checkbox"> <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!selectedAllGrade}}"></icon> <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{selectedAllGrade}}"></icon> </view> <view class="weui-cell__bd">全选</view> </label> </checkbox-group> <checkbox-group bindchange="checkOneGrade"> <label class="weui-cell weui-check__label" wx:for="{{selectLocation}}" wx:key="value"> <checkbox class="weui-check" value="{{item.id}}" checked="{{item.checked}}" /> <view class="weui-cell__hd weui-check__hd_in-checkbox"> <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon> <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon> </view> <view class="weui-cell__bd twoCk"> <view class='twoCk-top'>{{item.name}}</view> <view class='twoCk-foot'>{{item.area}}</view> </view> </label> </checkbox-group> </view> </view> </view>
css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* pages/manage/punch/selectStudent/index.wxss */ page { background: #f2f2f2; height: 100%; } checkbox-group { background: #fff; } checkbox-group .weui-check__label { border-bottom: 1rpx solid #ccc; height: 50rpx; } .weui-check__hd_in-checkbox{ height: 50rpx; } .weui-cells:before { border: none; } .weui-cells:after, .weui-cells:before { content: " "; position: absolute; left: 0; right: 0; height: 0px; color: #d9d9d9; } .weui-cells:after { border: none; } .weui-cell { position: static; height: 50rpx; } .weui-tab__panel { padding-top: 0rpx; } .weui-navbar { background: #fff; color: #000; position: fixed; top: 0; left: 0; height: 90rpx; } .page__bd { padding-bottom: 0; } .weui-tab__content { padding-top: 60px; text-align: center; } .weui-cell__bd { font-size: 30rpx; color: black; } .twoCk{ display: flex; flex-direction: column; } .twoCk-top{ font-size: 30rpx; } .twoCk-foot{ line-height:1.2; font-size:24rpx; color:#808080; margin-bottom: 10rpx; }