小程序实现多选框功能

<view class='header1'> <view class='header'>  <view class='header_con flex_between'>   <view class='left'>    共计{{items.length}}件商品   </view>   <view class='right flex_end'>    <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>     管理    </view>    <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>     完成    </view>   </view>  </view> </view></view><view class='header2'> <view class='header'>  <view class='header_con flex_between'>   <input value='类目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">   </input>   <view class='right flex_end'>    <block wx-if="{{title_disabled}}">     <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>    </block>    <block wx-if="{{!title_disabled}}">     <view class='flex_center' bindtap='finish_classname'>      完成     </view>    </block>   </view>  </view> </view></view><view class='onlinechoose'> <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>  <view class='list_cons flex_start'>   <view wx:if="{{management_good}}" class='lefts'>    <block wx-if="{{!i.checked}}">     <view class='icon_none'></view>    </block>    <block wx-if="{{i.checked}}">     <icon type="success" size="30" color="red" />    </block>   </view>   <image src='../../../image/hotel/demoimg.jpg'></image>   <view class='right'>    <view class='name'>     {{i.name}}    </view>    <view class='list1 flex_between'>     <view class='left'>      <view class='condition1'>       16|双人床|含早      </view>      <view class='condition2'>       <block>        间数：10       </block>       <block>        间数：2       </block>      </view>     </view>    </view>    <view class='list1 flex_between'>     <view class='left'>      <view class='condition2'>       类目一      </view>     </view>    </view>   </view>  </view> </view></view><view class='bottom flex_between' wx:if="{{management_good}}"> <view class='left flex_start'>  <block wx:if="{{select_all}}">   <view bindtap='select_none' class='flex_start'>    <icon type="success" size="30" color="red" />    <view>     取消全选    </view>   </view>  </block>  <block wx:if="{{!select_all}}">   <view bindtap='select_all' class='flex_start'>    <view class='select_none'>    </view>    <view>     全选    </view>   </view>  </block> </view> <view class='right flex_end'>  <view style='text-align:right'>   <view class='all'>    共选中{{middlearr.length}}件商品   </view>  </view>  <view bindtap='deleteitem' class='sure'>   删除  </view> </view></view>

.header1{ background-color: #f5f5f5;}.header2{ background-color: #ffffff;}.header { width: 100%; height: 80rpx; border-bottom: 1rpx solid #d6d6d6;}.header .header_con { width: 700rpx; height: 80rpx; margin: 0 auto; color: #333; font-size: 30rpx;}.header .header_con image{ width: 44rpx; height: 44rpx;}.header .header_con .right{ color: #ff4965;}.bottom{ width: 100%; height: 100rpx; border-top: 1rpx solid #d6d6d6; background-color: #fff; position: fixed; left: 0rpx; bottom: 0rpx;}.bottom .left{ margin-left: 25rpx;}.bottom .left .select_none{ width: 60rpx; height: 60rpx; border: 1rpx solid #d6d6d6; border-radius: 50%;}.bottom .right .all{ color: #ff830f; font-size: 26rpx;}.bottom .right .gray{ color: #666666; font-size: 22rpx;}.bottom .right .sure{ margin-left: 22rpx; width: 220rpx; height: 100rpx; line-height: 100rpx; text-align: center; background-color: #ff4965; color: #fff;}/*列表*/.onlinechoose{ width: 750rpx; margin-top: 15rpx; background-color: #ffffff; font-size: 32rpx;}.onlinechoose .hotel_list{ width: 750rpx; height: 260rpx; border-bottom: 1rpx solid #d6d6d6; background-color: #ffffff;}.onlinechoose .hotel_list .icon_none{ width: 60rpx; height: 60rpx; border: 1rpx solid #d6d6d6; border-radius: 50%;}.onlinechoose .hotel_list .list_cons{ width: 700rpx; height: 200rpx;}.onlinechoose .list_cons .lefts{ width: 80rpx;}.onlinechoose .list_cons image{ width: 200rpx; height: 200rpx; margin-right: 25rpx;}.list_cons .right{ width: 395rpx; height: 200rpx;}.list_cons .right .name{ font-size: 32rpx; color: #333333; font-weight: 700; letter-spacing: 3rpx; margin-bottom: 20rpx;}.list_cons .right .list1{  margin-bottom: 17rpx;}.list_cons .right .list1 .condition1{ font-size: 28rpx; color: #999999; margin-bottom: 15rpx;}.list_cons .right .list1 .condition2{ font-size: 24rpx; color: #999999;}.list_cons .right .list1 .act{ color: #2d8622;}.list_cons .right .list1 .r{ font-size: 24rpx; color: #ff4965;}.list_cons .right .list1 .big{ font-size: 32rpx;}.list_cons .right .lists2{ height: 36rpx;  line-height: 36rpx;  font-size: 22rpx;}.list_cons .right .lists2 .left{ width: 162rpx; text-align: center;  color: #ff4965; border: 1rpx solid #ff4965; box-sizing: border-box; border-radius: 5rpx;}.list_cons .right .lists2 .right2{ color: #999999;}.flex_center{ display: flex; display: -webkit-flex; justify-content: center; align-items: center;}.flex_between{ display: flex; display: -webkit-flex; justify-content: space-between; align-items: center;}.flex_start{ display: flex; display: -webkit-flex; justify-content: flex-start; align-items: center;}.flex_end{ display: flex; display: -webkit-flex; justify-content: flex-end; align-items: center;}

data: {  imgUrl: imgUrl,  title_disabled:true,//控制修改表头名字  management_good:false,  select_all:false,  middlearr:[],  items: [   { name: '1', checked: false},   { name: '2', checked: false},   { name: '3', checked: false},   { name: '4', checked: false},   { name: '5', checked: false},   { name: '6', checked: false},  ], }, // 改变类目的名字 change_classname:function(){   let that = this;   that.setData({    title_disabled: !that.data.title_disabled,   });  // 这里自动获取焦点 }, finish_classname: function () {  let that = this;  that.setData({   title_disabled: !that.data.title_disabled,  }) }, // 管理商品 management:function(){  let that = this;  that.setData({   management_good: true,  }) }, finish_management:function(){  let that = this;  that.setData({   management_good:false,  }) }, // 选择 select:function(e){  var that = this;  let arr2 = [];  if (that.data.management_good == false){    return;  }else{   var arr = that.data.items;   var index = e.currentTarget.dataset.id;   arr[index].checked = !arr[index].checked;   console.log(arr);   for(let i=0;i<arr.length;i++){     if(arr[i].checked){      arr2.push(arr[i])     }   };   that.setData({    items: arr,    middlearr:arr2   })  } }, // 删除 deleteitem:function(){  var that = this;  let arr = that.data.items;  let arr2 = [];  console.log(arr);  for(let i=0;i<arr.length;i++){   if (arr[i].checked == false){    arr2.push(arr[i]);   }  }  that.setData({   items:arr2,   middlearr:[]  }) }, // 全选 select_all:function(){  let that = this;  that.setData({   select_all: !that.data.select_all  })  if (that.data.select_all){   let arr = that.data.items;   let arr2 = [];   for (let i = 0; i < arr.length; i++) {    if (arr[i].checked == true) {     arr2.push(arr[i]);    }else{     arr[i].checked = true;     arr2.push(arr[i]);    }   }   that.setData({    items: arr2,    middlearr:arr2   })  } }, // 取消全选 select_none:function(){  let that = this;  that.setData({   select_all: !that.data.select_all  })  let arr = that.data.items;  let arr2 = [];  for (let i = 0; i < arr.length; i++) {    arr[i].checked = false;    arr2.push(arr[i]);  }  that.setData({   items: arr2,   middlearr:[]  }) },