php 微信小程序 循环 多选,微信小程序实现多选框功能

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

image.png

话不多说，直接上代码

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}}

.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)

},