微信小程序checkbox如何变小

这篇“微信小程序checkbox如何变小”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序checkbox如何变小”文章吧。

微信小程序checkbox怎么变小通过serviceValChange来监听所有checkbox的变化，监听函数通过e.dtail.value得到一个被选中的数组，通过选中数组checkArr[]，来给原先的数据数组allGoodFilter[]的被选中对象的check属性置true，没有被选中的置false，在我们的wxml中，通过判断每个对象的checked属性来给他一个"is_checked"的class。

wxml代码：

<checkbox-group bindchange="serviceValChange">

        <view class="service_selection flex">

          <block wx:for="{{allGoodsFilte}}">

            <view class=" item">

              <label class="checkbox {{item.checked?'is_checked':''}}">

                <checkbox value="{{item.value}}" checked="{{item.checked}}" hidden="false" />{{item.name}}

              </label>

            </view>

          </block>

        </view>

</checkbox-group>

wxss代码：

.flex{

  flex-direction: row;

}

.flex .item{

  flex: 1

}

.service_selection {

  padding: 15px 10px;

  background: #fff;

}

.service_selection label {

  background: #f0f1ec;

  padding: 6px 7px;

  font-size: 12px;

  border-radius: 4px;

}

.service_selection .is_checked {

  border: 1px solid #fe0002;

  color: #fe0002;

  background: #fff;

}

js代码：

首先是数据：

 data: {

    allGoodsFilte: [

      { name: '专人配送', value: '0', checked: true },

      { name: '精品品牌', value: '1', checked: false },

      { name: '超值优惠', value: '2', checked: false },

      { name: '门店自提', value: '3', checked: false },

      { name: '最快三小时', value: '4', checked: false },

    ],

绑定的checkbox监听函数：

 serviceValChange: function (e) {

    var allGoodsFilte = this.data.allGoodsFilte;

    var checkArr = e.detail.value;

    for (var i = 0; i < allGoodsFilte.length; i++) {

      if (checkArr.indexOf(i + "") != -1) {

        allGoodsFilte[i].checked = true;

      } else {

        allGoodsFilte[i].checked = false;

      }

    }

    this.setData({

      allGoodsFilte: allGoodsFilte

    })

  }

以上就是关于“微信小程序checkbox如何变小”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。