微信小程序-多选功能及效果

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

 1、index.wxml

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

2、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 () {

  }
})

3、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;
}