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

怎么在微信小程序中自定義一個復(fù)選框？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

index.wxml布局

<view class="container">
 <view class='class bgFFF' bindtap='isDep'>
  <view class='class-text'>
    <text class='red'> </text>
    <text>開放部門</text>
   </view>
  <view class='class-choose'>
   <text class='color333 perItem' wx:if="{{checkValue.length>0}}">
    <block wx:for="{{checkValue}}" wx:key="index"> {{item}} </block>
   </text>
   <text wx:else>默認(rèn)全部</text>
   <image src='/images/right-icon.png' mode="widthFix"></image>
  </view>
 </view>
 <view class='class bgFFF' bindtap='isPer'>
  <view class='class-text'>
    <text class='red'> </text>
    <text>開放成員</text>
   </view>
  <view class='class-choose'>
   <text class='color333 perItem' wx:if="{{depValue.length>0}}">
    <block wx:for="{{depValue}}" wx:key="index"> {{item}} </block>
   </text>
   <text wx:else>默認(rèn)全部</text>
   <image src='/images/right-icon.png' mode="widthFix"></image>
  </view>
 </view>
</view>


<!-- 部門列表 -->
<view class='typeListBox' wx:if="{{isDep}}">
 <view class='wrap'>
  <view class='nav'>
   <text class='active'>部門</text>
   <!-- <text class='{{navId==2?"active":""}}' data-id='2' bindtap='getNav'>人員</text> -->
  </view>
  <view class='checkbox-con'>
   <scroll-view scroll-y  scroll-top="{{scrollTop}}">
    <checkbox-group bindchange="checkboxChange" class="checkbox-group">
     <view wx:for="{{checkboxArr}}" wx:key="item.name">
      <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>
   </scroll-view>
  </view>
  <view class='btn1'>
   <button class='bgFFF' bindtap='cancel'>取消</button>
   <button class='' bindtap='confirm'>確定</button>
  </view>
 </view>
</view>

<!-- 成員列表 -->
<view class='typeListBox' wx:if="{{isPer}}">
 <view class='wrap'>
   <!-- 字母錨點 -->
   <view class='anchor'>
    <view bindtap="jumpTo" wx:for="{{words}}" wx:key="i" data-opt="{{item}}">{{item}}</view>
   </view>


  <view class='nav'>
   <text class='active'>人員</text>
  </view>
  <view class='checkbox-con'>
   <scroll-view scroll-y  scroll-with-animation='true' scroll-top="{{scrollTop}}" scroll-into-view="{{toView}}">
    <view class='typeList'>
     <checkbox-group class="radio-group" bindchange="checkBoxPer">
      <view wx:for="{{personnelArr}}" wx:key="index" wx:for-item="itemName" wx:for-index="itemNameInd">
       <view class='typeList-item-title' id="{{itemName.name}}">{{itemName.name}}</view>
       <label class='typeList-item' data-itemnameind='{{itemNameInd}}' bindtap="checkPer" wx:for="{{itemName.a}}" wx:key="a" wx:for-item="item" data-index="{{index}}">
        <checkbox value="{{item.name}}" checked="{{item.checked}}" color='#3eace2'/>
        <text>{{item.name}}</text>
       </label>
      </view>
     </checkbox-group>
    </view>
   </scroll-view>
  </view>
  <view class='btn1'>
   <button class='bgFFF' bindtap='cancel'>取消</button>
   <button class='' bindtap='confirmPer'>確定</button>
  </view>
 </view>
</view>

index.wxss樣式

.container {
 display: flex;
 flex-direction: column;
 box-sizing: border-box;
 background-color: #f5f5f5;
 padding-top: 20rpx;
} 

.class{
 display: flex;
 flex-direction: row;
 padding: 20rpx 0;
 background-color: #fff;
 margin-bottom: 20rpx;
}
.class view.class-text{
 flex: 1;
 padding-left: 30rpx;
 font-size: 14px;
}
.red{
 margin-right: 10rpx;
 color: #ff0000;
}
.class-choose{
 max-width: 60%;
 display: flex;
 flex-direction: row;
 text-align: right;
}
.class-choose-item{
 display: flex;
 flex-direction: column;
 padding-right: 40rpx;
}
.class-choose text{
 flex: 1;
 font-size: 14px;
 color: #999;
}
.class-choose text.color333{
 color: #333;
}
.class-choose image{
 width: 16px;
 margin: 6rpx 20rpx 0;
}


/* 部門列表樣式 */
.typeListBox{
 z-index: 101;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 50rpx;
 background: rgba(0,0,0,0.3);
}
.typeList{
 /* margin-top: 200rpx; */
 padding: 0 30rpx;
 border-radius: 5px;
 font-size: 13px;
 background-color: #fff;
}
.typeList .radio-group{
 display: flex;
 flex-direction: column;
}
.typeList-item{
 display: flex;
 flex-direction: row;
 padding: 20rpx 0;
 border-bottom: 1rpx solid #f5f5f5;
}
.typeList-item text{
 margin-left: 10rpx;
 line-height: 48rpx;
}
.radio{
 padding: 0 20rpx 0 0;
}
.engineer{
 padding: 0 20rpx 0 0;
}
.engineer-text{
 line-height: 46rpx;
}
.engineer-item{
 padding: 10rpx 0;
}

.nav{
 display: flex;
 flex-direction: row;
 border-bottom: 1rpx solid #f5f5f5;
}
.nav text{
 padding: 20rpx;
 flex: 1;
 text-align: center;
 font-size: 16px;
}
.nav text.active{
 color: #3eace2;
 border-bottom: 1rpx solid #3eace2;
}.wrap{
 padding: 20rpx 30rpx;
 border-radius: 5px;
 font-size: 13px;
 background-color: #fff;
 position: relative;
}
 
.checkbox-con{
 margin: 50rpx auto;
 text-align: center;
 position: relative;
}
.checkbox-group view{
 float: left;
 width: 50%;
 display: flex;
 flex-direction: column;
 padding: 0 20rpx 40rpx;
 box-sizing: border-box;
}
.checkbox{
 flex: 1;
 height: 72rpx;
 line-height: 72rpx;
 font-size: 28rpx;
 color: #888888;
 border: 1rpx solid #CECECE;
 border-radius: 5rpx;
 /* display: inline-block; */
 /* margin: 0 10rpx 30rpx 0; */
 position: relative;
}
/* .checkbox-group{
 display: flex;
 flex-direction: row;
} */
.checked{
 color: #3eace2;
 background: rgba(49,165,253,0.08);
 border: 1rpx solid #3eace2;
}
.checkbox checkbox{
 display: none
}
.checked-img{
 width: 28rpx;
 height: 28rpx;
 position: absolute;
 top: 0;
 right: 0
}
.btn1{
 display: flex;
 flex-direction: row;
}
.btn1 button{
 flex: 1;
 background-color: #3eace2;
 color: #fff;
}
.btn1 button.bgFFF{
 margin-right: 20rpx;
 color: #666;
 background-color: #fff;
}
.perItem{
 box-sizing: border-box;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
}
.anchor{
 z-index: 101;
 position: absolute;
 top: 150rpx;
 right: 20rpx;
 font-size: 12px;
}
.anchor view{
 padding: 0 5rpx;
 text-align: center;
}
.typeList-item-title{
 padding: 10rpx 10rpx 5rpx;
 color: #666;
 background-color: #f5f5f5;
 text-align: left;
}

index.js

const app = getApp()
Page({
 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",
   },
   {
    checked: false,//是否選中
    id: "7",//部門能id
    name: "部門7",
   },
   {
    checked: false,//是否選中
    id: "8",//部門能id
    name: "部門8",
   },
   {
    checked: false,//是否選中
    id: "9",//部門能id
    name: "部門9",
   },
   {
    checked: false,//是否選中
    id: "10",//部門能id
    name: "部門10",
   },
   {
    checked: false,//是否選中
    id: "11",//部門能id
    name: "部門11",
   },
   {
    checked: false,//是否選中
    id: "12",//部門能id
    name: "部門12",
   },
   {
    checked: false,//是否選中
    id: "13",//部門能id
    name: "部門13",
   },
   {
    checked: false,//是否選中
    id: "14",//部門能id
    name: "部門14",
   },
   {
    checked: false,//是否選中
    id: "15",//部門能id
    name: "部門15",
   },
  ],//部門列表
  personnelArr: null,//人員列表
  checkValue: [],//部門
  depValue: [],//部門
  isDep: false,//部門顯隱
  isPer: false,//成員顯隱
  d_id: [],//部門id集合
  u_id: [],//人員集合
  words: null,//成員名稱的手寫字母
 },

 //控制部門的顯隱
 isDep: function () {
  this.setData({
   isDep: true,
  })
 },
 
 //控制人員顯隱
 isPer: function () {
  this.setData({
   isPer: true,
  })
 },

 //取消按鈕
 cancel: function () {
  this.setData({
   isDep: false,
   isPer: false
  })
 },

 //人員
 checkPer: function (e) {
  var index = e.currentTarget.dataset.index;//獲取當(dāng)前點擊的下標(biāo)
  var ind = e.currentTarget.dataset.itemnameind;//獲取當(dāng)前點擊的下標(biāo)
  var personnelArr = this.data.personnelArr;//選項集合
  personnelArr[ind].a[index].checked = !personnelArr[ind].a[index].checked;//改變當(dāng)前選中的checked值

  // var u_id = this.data.u_id;//獲取data中的成員id集合
  // var id = personnelArr[ind].a[index].id;//獲取選中的成員id
  // //判斷，當(dāng)前選中的這個值的checked是不是已經(jīng)選中，如果是則將id放入選中成員id集合，反之則移除
  // if (personnelArr[ind].a[index].checked) {
  //  u_id.push(id);
  // } else {
  //  this.removeByValue(u_id, id);
  // }

  this.setData({
   personnelArr: personnelArr
  });
 },
 checkBoxPer: function (e) {
  var depValue = e.detail.value;
  this.setData({
   depValue: depValue
  });
 },
 confirmPer: function () {// 提交
  this.setData({
   isPer: false,
  })
 },

 //部門
 checkbox: function (e) {
  var index = e.currentTarget.dataset.index;//獲取當(dāng)前點擊的下標(biāo)
  var checkboxArr = this.data.checkboxArr;//選項集合
  checkboxArr[index].checked = !checkboxArr[index].checked;//改變當(dāng)前選中的checked值

  //如果需要部門聯(lián)動成員
  // var d_id = this.data.d_id;//獲取data中的部門id集合
  // var id = checkboxArr[index].id;//獲取選中的部門id
  // //判斷，當(dāng)前選中的這個值的checked是不是已經(jīng)選中，如果是則將id放入選中部門id集合，反之則移除
  // if (checkboxArr[index].checked) {
  //  d_id.push(id);
  // } else {
  //  this.removeByValue(d_id, id);
  // }

  this.setData({
   checkboxArr: checkboxArr
  });
 },
 checkboxChange: function (e) {
  var checkValue = e.detail.value;
  this.setData({
   checkValue: checkValue
  });
 },
 confirm: function () {// 確定
  this.setData({
   isDep: false,
   // depValue: []如果是聯(lián)動，選中部門后需要清除選中的成員
  })
  // this.getUser();//通過選中部門來獲取不通的部門成員，將獲取到的數(shù)據(jù)存入checkboxArr中
 },

 
 onLoad: function () {
  //模擬測試人員數(shù)據(jù)
  var arr = {
   data: [
    {
     checked: false,
     id: "83",
     name: "張三",
     word: "Z",
    }, {
     checked: false,
     id: "22",
     name: "張三豐",
     word: "Z",
    }, {
     checked: false,
     id: "23",
     name: "張無忌",
     word: "Z",
    }, {
     checked: false,
     id: "83",
     name: "李四",
     word: "L",
    }, {
     checked: false,
     id: "83",
     name: "王五",
     word: "W",
    }, {
     checked: false,
     id: "83",
     name: "測試",
     word: "C",
    },
   ],//成員數(shù)組
   words: ["C", "L", "W", "Z"],//成員字母集合
  };
  this.setData({
   words: arr.words,
  })
  this.integration(arr)
 },


 // 整合人員字母
 integration: function (list) {
  // console.log(list)
  var arr = [];
  for (var j = 0; j < list.words.length; j++) {
   var aa = {
    name: null,
    a: []
   };
   aa.name = list.words[j];
   for (var k = 0; k < list.data.length; k++) {
    if (list.words[j] == list.data[k].word) {
     aa.a.push(list.data[k]);
    }
   }
   arr.push(aa)
  }
  this.setData({
   personnelArr: arr,
  })
  // console.log(arr)
 },
})

關(guān)于怎么在微信小程序中自定義一個復(fù)選框問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。