微信小程序实现多选框功能的实例代码

<!-- 选择 S -->
 <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>
 <!-- 选择 E -->

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

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