微信小程序 自定义复选框实现代码实例

<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 style="height: 700rpx;" 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 style="height: 700rpx;" 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>

.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;}

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) },})