[泛微E9制作·前端JS]多个Check框为一组，达成选择框的单选框功能，并实现必填功能即在用户提交或者保存时未选择组合中的值弹窗提醒

1、特性背景

最近在跟用户沟通需求时，发现用户要求复选框的样式但是还要单选功能，现有的选择框字段无法满足需求，于是就用Check框+JS代码简单实现一下该功能。

2、展示效果

3、实现方法

//将字段名称转换成字段id
const check1 = WfForm.convertFieldNameToId("check1");
const check2 = WfForm.convertFieldNameToId("check2");
const check3 = WfForm.convertFieldNameToId("check3");
const check4 = WfForm.convertFieldNameToId("check4");
const check5 = WfForm.convertFieldNameToId("check5");
const check6 = WfForm.convertFieldNameToId("check6");
const check7 = WfForm.convertFieldNameToId("check7");
const check8 = WfForm.convertFieldNameToId("check8");
//将获取的字段id保存在数组中
const arrList = [check1, check2, check3, check4, check5, check6, check7, check8];
//表单字段值变化触发事件
WfForm.bindFieldChangeEvent(arrList.join(","), function (obj, id, value) {
changeFieldGroup(arrList, id, value);
});
//保存、提交按钮点击触发事件
WfForm.registerCheckEvent(WfForm.OPER_SAVE + "," + WfForm.OPER_SUBMIT, function (callback) {
if (!selectStatus(arrList)) {
alert("Check未选择!");
}
});
//改变字段组数据
function changeFieldGroup(arr, id, value) {
if (!Array.isArray(arr)) {
alert('系统错误，请联系管理员');
}
if (value == 1) {
//遍历所有未选择的check框赋值空
arr.filter(item => item !== id).forEach(function (element) {
WfForm.changeFieldValue(element, {value: ""});
});
//选择的check框
arr.filter(item => item === id).forEach(function (element) {
console.log("点击了:" + element + "，位于第" + arr.indexOf(element) + "个位置");
});
}
}
//判断check框组合中是否有选中的值，未选中 false，选中 true
function selectStatus(arr) {
return arr.some(item => WfForm.getFieldValue(item) == 1);
}

4、延伸应用

如果表单中有字段需根据Check框组合中选择的值控制其表明属性，可以自行在JS代码中添加相关代码，或者新建一个下拉框字段，在代码"选择的check框"中给下拉框字段赋值，再通过流程自带的高级设置-展示属性联动来控制显示属性。