微信小程序 多选框的使用

本文主要是介绍微信小程序 多选框的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求

上个月给公司做了个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开始，所以需要减1sealTypeList[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，谁就checkedsealTypeList.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();
},

这篇关于微信小程序 多选框的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---