小程序添加表单页面跳转到多选全选页面(备份前端网)

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>

  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

// 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

<!--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

/* 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;
}