微信小程序checkbox全选与单选

js

data: {
    barheight:"",
    textheight:"",
    textTop:"",
    checkAll:false,
      select_all:false,
      listData: [{code: "111",text: "text1",typ: "type1",},
      {code: "021",text: "text2",typ: "type2",},
      {code: "333",text: "text1",typ: "type3",}]
  },
  selectall: function() {//全选与反全选
    var that = this;
    for (let i = 0; i < that.data.listData.length; i++) {
    that.data.listData[i].checked = (!that.data.select_all)}
    that.setData({
      listData: that.data.listData,
      select_all: (!that.data.select_all)
    })
  },

html

<checkbox-group  bindchange="checkboxChange">
    <view wx:for="{{listData}}" class="order">
      <view>
        <checkbox value="{{item.code}}" checked="{{item.checked}}" ></checkbox>
      </view>
      <view>
        <view>
          <text>2020.12.11周三 09:30</text>
        </view>
        <view>
          <view></view>
          <text>成都</text>
          <text style="font-size: 24rpx;">（青羊区草市街123号）</text>
        </view>
        <view>
          <view></view>
          <text>都江堰</text>
          <text style="font-size: 24rpx;">（都江堰北大街2号）</text>
        </view>
      </view>
      <view>
        <text style="font-size:40rpx;font-weight:500;">￥234</text>
      </view>
    </view>
  </checkbox-group>
    <view class="button">
      <view class="tongji">
      <text>1</text>个行程，共 <text>200</text>元
      </view>
      <view>
        <view>
          <checkbox value="pageAll" ></checkbox>
          <text>本页全选</text>
        </view>
        <view>
          <checkbox bindtap="selectall" value="page" checked="{{select_all}}"></checkbox>
          <text>全部全选</text>
        </view>
        <view bindtap="tokaifapiao">
          <text>下一步</text>
        </view>
      </view>
      <view>
      </view>
    </view>

wxss

.button{
  height: 230rpx;
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0px;
  background-color: #ffffff;
  width: 100%;
}
.button>view:nth-child(1){
  height: 64rpx;
  line-height: 64rpx;
  border-bottom: 1px solid #dddddd;
  padding-left: 32rpx;
}
.button>view:nth-child(1) text{
  color: #ffb220;
}
.button>view:nth-child(2){
  height: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 24rpx;
  color: #ffb220;
  justify-content: space-between;
  padding: 0px 0rpx 0px 30rpx;
}
.button>view:nth-child(2)>view:nth-child(3){
  height: 98rpx;
  background: linear-gradient(to right ,#FDB938 ,#FF8D26);
  width: 196rpx;
  color: #ffffff;
  line-height:98rpx ;
  text-align: center;
  font-size: 30rpx;
}
.button>view:nth-child(3){
  height: 68rpx;
}
.order{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 30rpx 0 30rpx;
  justify-content: space-around;
  background-color: #ffffff;
  height: 220rpx;
  box-shadow: inset 0 -2rpx 0 0 #dddddd;
}
.order>view:nth-child(1){
  width: 60rpx;
}
.order>view:nth-child(2){
  flex: 1;
  padding-left: 30rpx;
}
.order>view:nth-child(2)>view:nth-child(2){
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.order>view:nth-child(2)>view:nth-child(2) view{
  height: 12rpx;
  width: 12rpx;
  border-radius: 12rpx;
  background-color: #ffb220;
}
.order>view:nth-child(2)>view:nth-child(2) text{
  font-size: 30rpx;
  font-weight: 500;
  margin-left: 8rpx;
}
.order>view:nth-child(2)>view:nth-child(3){
  margin-top: 8rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.order>view:nth-child(2)>view:nth-child(3) view{
  height: 12rpx;
  width: 12rpx;
  border-radius: 12rpx;
  background-color: #7cadf4;
}
.order>view:nth-child(2)>view:nth-child(3) text{
  font-size: 30rpx;
  font-weight: 500;
  margin-left: 8rpx;
}
.order>view:nth-child(3){
  width: 180rpx;
  text-align: right;
  padding-right: 30rpx;
}