微信小程序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如何變小”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。