• 要實(shí)現(xiàn)如圖效果，選中與不選中兩種狀態(tài)

image.png

• 話不多說，直接上代碼

    <view class="comment-btn">
        <button 
            wx:for="{{riderCommentList}}" 
            wx:for-item="item" 
            wx:key="item.index"  
            bindtap="checkboxChange" 
            data-value="{{item.value}}" 
            data-index="{{index}}"  
            checked="{{item.selected}}"
            class="btn {{item.selected ? 'btn-selected' : ''}}" >
            {{item.title}}
        </button>
    </view>

  .btn{
      width: 150rpx;
      height: 70rpx;
      font-size: 24rpx;
      padding: 0;
      border: 1px solid #dcdcdc;
      background: #fff;
      border-radius: 4px;
      margin: 15rpx 10rpx;
      text-align: center;
  }
  .btn-selected{
      border: 1px solid #06a380;
  }

  data: {
    riderCommentList: [{
      value: '衣著整潔',
      selected: false ,
      title: '衣著整潔'
    },{
      value: '準(zhǔn)時送達(dá)',
      selected: false ,
      title: '準(zhǔn)時送達(dá)'
    },{
      value: '餐品完善',
      selected: false ,
      title: '餐品完善'
    },{
      value: '服務(wù)專業(yè)',
      selected: false ,
      title: '服務(wù)專業(yè)'
    },{
      value: '微笑服務(wù)',
      selected: false ,
      title: '微笑服務(wù)'
    },{
      value: '穿著專業(yè)',
      selected: false ,
      title: '穿著專業(yè)'
    },{
      value: '文字評價',
      selected: false ,
      title: '文字評價'
    }]
  },
  checkboxChange(e){
    console.log('checkboxChange e:',e);
    let string = "riderCommentList["+e.target.dataset.index+"].selected"
        this.setData({
            [string]: !this.data.riderCommentList[e.target.dataset.index].selected
        })
        let detailValue = this.data.riderCommentList.filter(it => it.selected).map(it => it.value)
        console.log('所有選中的值為：', detailValue)
  },