小程序实践（七）----checkbox实现多选弹窗

小程序（七）----checkbox实现多选弹窗

今天开发过程中需要实现一个多选然后以弹窗的方式实现，然后就有了接下来的这个不算太beautiful的弹窗多选可互斥功能。
有需要的复制粘贴即可使用，适合新手哦。
效果图：

1.布局wxll

<view style="background:white;width:100%;height:auto;padding:20px 14px;">
  <!-- 复选弹框列表 -->
  <view class='typeListBox' wx:if="{{isDep}}">

    <view class='wrap'>
      <view class='checkbox-con'>
        <text style="width: 100%; color: #00BCD4; text-align: center; position: absolute; left: 0px; top: -28px;font-size: 17px; font-weight: bold;padding: 3px;margin: 0px;">选择今日想学科目</text>

        <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>
  <text style="color:#e91e63;font-size:18px;padding:10px;">所选科目：{{fpTypeText}}</text>

</view><button catchtap='isDep'>点击选择今日所学科目，可多选</button>

2.js实现可单选可多选，以及互斥功能

var checkValue = [];//顶部复选框所选状态显示 数组
var items;//复选弹框数组
var kindStr;//复选的选项
Page({
  data: {
    fpTypeText:'',
    checkValue: [],// 
    isDep: false,// 显隐复选列表
  },
  //控制 弹框的显隐
  isDep: function () {
    this.setData({//弹框显示，地图隐藏
      isDep: true,
      mapHide: true
    })
  },
  // 确定按钮
  confirm: function () {
    var that = this;
    checkValue = [];
    var fpTypeText = '';
    kindStr = [];
    checkValue = that.data.checkboxArr.map(item => {
      if (item.checked) {
        kindStr.push(item.value);
        fpTypeText += item.name + ',';
        return { name: item.name }
      }
    })
    fpTypeText = fpTypeText.substring(0, fpTypeText.length - 1);//去掉数组中最后一个逗号
    that.setData({
      isDep: false,
      fpTypeText: fpTypeText,
      checkValue: checkValue
    })
  },
  //取消按钮
  cancel: function () {
    this.setData({
      isDep: false,
      mapHide: false
    })
  },
  // 弹框多选事件
  checkbox: function (e) {
    var idx = e.currentTarget.dataset.index;//获取当前点击的下标
    var checkboxArr = this.data.checkboxArr;//选项集合
    var valCur = checkboxArr[idx].value;
    for (var i = 0; i < checkboxArr.length; i++) {
      if (valCur == '1') {//当前选择了 全部
        checkboxArr[i].checked = false;
        checkboxArr[idx].checked = !checkboxArr[idx].checked;改变当前选中的checked值
      } else {
        checkboxArr[0].checked = false;
        checkboxArr[idx].checked = !checkboxArr[idx].checked;//改变当前选中的checked值
      }
    }
    this.setData({
      checkboxArr: checkboxArr
    });
  },

  
  scroll: function (event) {
    this.setData({
      scrollTop: event.detail.scrollTop
    });
  },
  

  onLoad(options) {
     var that = this;
     items=[{
      name:'自习',
      checked:false,
      value:'1'
    },{
      name:'数学',
      checked:false,
      value:'2'
    },{
      name:'物理',
      checked:false,
      value:'3'
    },{
      name:'化学',
      checked:false,
      value:'4'
    },{
      name:'生物',
      checked:false,
      value:'5'
    }],
      that.setData({
       
        checkValue: checkValue,//顶部复选框 选中的值显示
        checkboxArr: items//复选框弹框 字典赋值

      })
  }
});

以上便是今天的分享，不懂的可以留言哦，看到会回复的。一起学习起来吧