微信小程序实现多选框功能

• 要实现如图效果，选中与不选中两种状态

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: '准时送达',
      selected: false ,
      title: '准时送达'
    },{
      value: '餐品完善',
      selected: false ,
      title: '餐品完善'
    },{
      value: '服务专业',
      selected: false ,
      title: '服务专业'
    },{
      value: '微笑服务',
      selected: false ,
      title: '微笑服务'
    },{
      value: '穿着专业',
      selected: false ,
      title: '穿着专业'
    },{
      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)
  },