需求

上个月给公司做了个OA 小程序，其中一个模块是用印申请，效果如图所示，点击 选择公章类型， 弹出 多选框，点击确定公章类型显示到文本框内，再次点击可修改

效果图

核心代码（wxml，JavaScript）

<!-- 用印类型-弹框实现 -->
      <view class="forItemBorder">
        <!-- 用印弹窗 -->
        <view class="weui-cell weui-cell_input" bindtap="showDialogBtn">
          <view class="weui-cell__hd">
            <view class="weui-label">公章类型</view>
          </view>
          <view style="width: 440rpx;">
            <input type="text" class="weui-input" name="sealType" value="{{sealType}}" placeholder-style="color:#B2B2B2"
              placeholder="请选择公章类型" disabled="disabled" />
          </view>
          <view class='weui-cell__ft arrow_right'></view>
        </view>
        <!-- 遮罩层 -->
        <view class="modal-mask" wx:if="{{showModal}}"></view>
        <!-- 弹出框 -->
        <view class="modal-dialog" wx:if="{{showModal}}">
          <view class="modal-content">
            <checkbox-group data-index="{{index}}" bindchange="checkboxChange" name="sealType">
              <label class="checkbox" wx:for="{{sealTypeList}}" wx:key="key" wx:for-item="item">
                <checkbox value="{{item.id}}" checked="{{item.checked}}" color="#2A98BD" />
                <view class="checked_label" style="color:#37383B">{{item.gzkind}}</view>
              </label>
            </checkbox-group>
          </view>
          <!-- 操作按钮 -->
          <view class="modal-footer">
            <button class="btn btn-cancel" bindtap="onCancel" data-status="cancel">取消</button>
            <button class="btn btn-confirm" bindtap="onConfirm" data-status="confirm">确定</button>
          </view>
        </view>
      </view>

// 后台传过来的公章对象数组用sealTypeList 接收
checkboxChange: function (e) {
	let that = this;
	let sealTypeList = this.data.sealTypeList;
	// 若之前已选择公章，将其回显打勾
	
	for (let i = 0; i < sealTypeList.length; i++) {
		sealTypeList[i].checked = false;
	}
	let indexes = e.detail.value;
	for (let i = 0; i < indexes.length; i++) {
		indexes[i] = parseInt(indexes[i]);
		// 多选框从1开始，数组下标从0开始，所以需要减1
		sealTypeList[indexes[i] - 1].checked = true;
	}
	// 直接将整个list赋值回去
	this.setData({
		sealTypeList: sealTypeList
	})
},
// 用户点击确定
onConfirm: function () {
	let that = this;
	let seals = [];
	let sealTypeList = this.data.sealTypeList;
	sealTypeList.forEach(function (e) {
		if (e.checked) {
			// gzkind是对象的一个属性，表示具体公章类型名的字符串
			seals.push(e.gzkind);
		}
	});
	// 显示到wxml上
	this.setData({
		sealType: seals.join(",")
	})
	// 隐藏弹出的对话框
	//this.hideModal();
},
// 用户点击取消
onCancel: function () {
	let that = this;
	let sealTypeList = this.data.sealTypeList;
	// 获取上一次选择的用印类型字符串（规定用，隔开）
	let gzkind = this.data.sealType || "";
	// 放弃当前的勾选，原来谁checked，谁就checked
	sealTypeList.forEach(function (e) {
		e.checked = false;
	});
	if (gzkind !== "") {
		gzkind = gzkind.split(",");
		for (let i = 0; i < gzkind.length; i++) {
			for (let j = 0; j < sealTypeList.length; j++) {
				let e = sealTypeList[j];
				if (e.gzkind == gzkind[i]) {
					e.checked = true;
				}
			}
		}
	}

	this.setData({
		sealTypeList: sealTypeList
	});
	// 将弹出的对话框隐藏
	// this.hideModal();
},