我们先来看看效果: 两种状态: 选中/不选中wxml



{{item.title}}





{{item.title}}

核心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 () {

}
})
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 () {

}
})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;
}
.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;
}总结总结总结