index.wxml
<view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}" checked="{{item.selected}}" class="btn {{item.selected ? 'btn-selected' : ''}}" >
{{item.title}}
</view>
index.js
Page({ /**
* 页面的初始数据 */
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)
}, /**
* 生命周期函数--监听页面加载 */
onLoad: function (options) {
}, /**
* 生命周期函数--监听页面初次渲染完成 */
onReady: function () {
}, /**
* 生命周期函数--监听页面显示 */
onShow: function () {
}, /**
* 生命周期函数--监听页面隐藏 */
onHide: function () {
}, /**
* 生命周期函数--监听页面卸载 */
onUnload: function () {
}, /**
* 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () {
}, /**
* 页面上拉触底事件的处理函数 */
onReachBottom: function () {
}, /**
* 用户点击右上角分享 */
onShareAppMessage: function () {
}
})
index.wxss
.btn{
font-size: 24rpx;
padding: 12rpx 19rpx;
border: 1px solid #dcdcdc;
background: #F8F8F8;
border-radius: 10rpx;
margin-right: 30rpx;
margin-bottom: 22rpx;
text-align: center;
display: inline-block;
color: #666666;
}.btn:nth-child(5) {
margin-right: 0;
}.btn-selected{
border: 1px solid #FF7C80;
color: #F73C41;
background: #FFFFFF;
}