- 要实现如图效果，选中与不选中两种状态
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)
},
