微信小程序怎么自定義復(fù)選框

本篇內(nèi)容介紹了“微信小程序怎么自定義復(fù)選框”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、效果 

2、wxml

<checkbox-group bindchange="checkboxChange" class="checkbox-group">
     <view wx:for="{{checkboxArr}}" wx:key="index" class="padding-xs">
            <label class="{{item.checked?'checkbox checked':'checkbox'}}" bindtap='checkbox' data-index="{{index}}">
       <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
            </label>
     </view>
</checkbox-group>

3、js

data:{
 
 checkboxArr: [
  {
   checked: false,//是否選中
   id: "1",//部門能id
   name: "部門1",
  },
  {
   checked: false,//是否選中
   id: "2",//部門能id
   name: "部門2",
  },
  {
   checked: false,//是否選中
   id: "3",//部門能id
   name: "部門3",
  },
  {
   checked: false,//是否選中
   id: "4",//部門能id
   name: "部門4",
  },
  {
   checked: false,//是否選中
   id: "5",//部門能id
   name: "部門5",
  },
  {
   checked: false,//是否選中
   id: "6",//部門能id
   name: "部門6",
  },]
},
 checkbox: function (e) {
  var index = e.currentTarget.dataset.index;//獲取當(dāng)前點(diǎn)擊的下標(biāo)
  var checkboxArr = this.data.checkboxArr;//選項(xiàng)集合
  checkboxArr[index].checked = !checkboxArr[index].checked;//改變當(dāng)前選中的checked值
 
  this.setData({
   checkboxArr: checkboxArr
  });
 },
 checkboxChange: function (e) {
  var checkValue = e.detail.value;
  console.log(e.detail.value)
  this.setData({
   checkValue: checkValue
  });
 },

4、wxss 局部樣式

 .checkbox-group{
 display: flex;
 flex-wrap: wrap;
 }
 .checkbox{
  display: flex;
  align-items: center;
  padding: 10rpx;
  color: #aaaaaa;
  border: 2rpx solid #CECECE;
  border-radius: 5rpx;
 justify-content: center;
 margin-right: 20rpx;
 }
.checked{
  color: #3eace2;
  background: rgba(49,165,253,0.08);
  border: 1rpx solid #3eace2;
 }
 .checkbox-group checkbox{
  display: none
 }

“微信小程序怎么自定義復(fù)選框”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！