微信小程序实现多选框功能以及效果

灰太狼 2023-02-16 04:30 25阅读 0赞

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

![20200608133800637.png][]

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>

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

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

QQ群: 1102727334

[20200608133800637.png]: https://img-blog.csdnimg.cn/20200608133800637.png