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

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

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>默認全部</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>默認全部</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;//獲取當前點擊的下標
  var ind = e.currentTarget.dataset.itemnameind;//獲取當前點擊的下標
  var personnelArr = this.data.personnelArr;//選項集合
  personnelArr[ind].a[index].checked = !personnelArr[ind].a[index].checked;//改變當前選中的checked值

  // var u_id = this.data.u_id;//獲取data中的成員id集合
  // var id = personnelArr[ind].a[index].id;//獲取選中的成員id
  // //判斷，當前選中的這個值的checked是不是已經選中，如果是則將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;//獲取當前點擊的下標
  var checkboxArr = this.data.checkboxArr;//選項集合
  checkboxArr[index].checked = !checkboxArr[index].checked;//改變當前選中的checked值

  //如果需要部門聯動成員
  // var d_id = this.data.d_id;//獲取data中的部門id集合
  // var id = checkboxArr[index].id;//獲取選中的部門id
  // //判斷，當前選中的這個值的checked是不是已經選中，如果是則將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: []如果是聯動，選中部門后需要清除選中的成員
  })
  // this.getUser();//通過選中部門來獲取不通的部門成員，將獲取到的數據存入checkboxArr中
 },

 
 onLoad: function () {
  //模擬測試人員數據
  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",
    },
   ],//成員數組
   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)
 },
})

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