微信小程序复选功能非checkbox组件，无选中勾选按钮

wxml

<view class="list top float">
  <view>简单的复选框</view>
  <view> 
    <view wx:for="{{checkArr}}" wx:key="id" catchtap="checkArr" data-id="{{index}}"
      class="{{item.check == true ? 'red':''}}">
      {{item.content}}
    </view>
  </view>
</view>

css

.red{
    color: red;
  }

Js

checkArr: [{id: 1,check: '',content: "复选1"},
      	   {id: 2,check: '',content: "复选2"},
      	   {id: 3,check: '',content: "复选3"},
           {id: 4,check: '',content: "复选4"},
           {id: 5,check: '',content: "复选5"},
           {id: 6,check: '',content: "复选6"}]
checkArrOut:[]

checkArr: function (e) {
    this.data.checkArr[e.target.dataset.id].check = !this.data.checkArr[e.target.dataset.id].check;
    //在这清空可以避免复选后id是追加
    this.data.checkArrOut = []
    for (let i = 0; i < this.data.checkArr.length; i++) {
      if (this.data.checkArr[i].check == true) {
        // this.data.checkArrOut[i] = this.data.checkArr[i].id //会保留key值对
        this.data.checkArrOut.push(this.data.checkArr[i].id)
      }
    }
    this.setData(this.data)
    console.log(this.data.checkArrOut)
  },

this.data.checkArrOut.push(this.data.checkArr[i].id)
//无保留键原位置

this.data.checkArrOut[i] = this.data.checkArr[i].id
//保留key值对位置,即使取消选择数组的长度也是5