小程序中关于购物车的全选

购物车单选：

1. 数据需要有一个标记是否选中的变量isSelect，当每次点击选中或者取消时取反，这里面的class需要用三元表达式来表示class='{{isSelect ？ 'xuanzhong' : 'weixuanzhong'}}'，以此来区别；
2. 由于所有的数据是通过循环生成的，需要来确定当前点击的对象，需要在每一项上绑定一个data-属性，比如data-id，当我们绑定了bindtap='click'时，可以通过事件e的
   e.currentTarget.dataset.id来确定当前点击的对象。
   具体代码如下：

//wxml里面的代码
<view wx:for="{{list}}" class='{{item.isSelect ? "xuanzhong" : "weixuanzhong"}}' data-id="{{item.id}}" bindtap="click">{{item.name}}</view>

//js代码
<script>
      click(e){
            //这一步是从list中筛选出它子元素id与当前点击对象id相同的子元素，让其变量取反
            let curr =  this.data.list.find(r => r.id ===e.currentTarget.dataset.id )
            curr.isSelect = ! curr.isSelect
            //通知页面更新
            this.setData({
                         list:this.data.list
             })
      }
</script>

购物车全选

在data里面设置一个变量isSelectAll来判断是否全选,当点击全选时，触发selectAll方法，isSelectAll先取反，然后用forEach方法将list遍历循环，将list里的isSelect=isSelectAll，最后通知页面更新。

<script>
      selectAll(e){
            isSelectAll = ! isSelectAll
            this.data.list.forEach(r => {
            //list里面每一项的isSelect和isSelectAll一致，达到全选或全不选的效果
                  r.isSelect = this.data.isSelectAll
             })
            
            //通知页面更新,要更新isSelectAll变量和list变量
            this.setData({
                         list:this.data.list
                         isSelectAll:this.data.isSelectAll
             })
      }
</script>

当每一项全选时，全选打勾

这个需要在每一项点击的时候判断，用every方法遍历循环list里面所有项的isSelect是否等于isSelectAll，如果这个判断出来时true，则为全选。
代码如下

<script>
      click(e){
          let curr = this.data.list.find(r => r.id === e.currentTarget.dataset.id)
          curr.isSelect = !curr.isSelect
          let selectAll = this.data.list.every(r =>{
                return r.isSelect === true
              })
          //这里由于isSelect 本身就是布尔值，可以直接返回isSelect ，所以可以简写成    
          // let selectAll = this.data.list.every(r => r.isSelect)
          this.setData({
                list: this.data.list,
                isSelectAll: selectAll
            })
      }
</script>

总结