E8-写了一个方法，处理一个表单里有多组需要实现单选或复选的复选框

起因

今天同事发来需求，要做一个工作流，其中表单里有几组选项。在纸质单上是留出位置画勾选择的。简单的聊了一下对填报的要求，要求有的组要控制单选，有的组还不需要制多选。用文字来描述很晦涩，看到表单估计小伙伴们就知道什么意思了。表单如下图，其中“运输方式”和“运费承担”的选项之间是要做单选控制的，付款方式则不用。

经过

选去回顾了去年处理复选框的经历，看看有哪个能直接拿过来用的。

E8-怎么写一段JS去控制CheckBox_js监听checkbox变化-CSDN博客

E8-控制一组CheckBox的单选_泛微e8 触发checkbox事件-CSDN博客

E8-怎么实现控制一组CheckBox中至少选一个_qt 如何判断两个checkbox 同时只能选中一个-CSDN博客

如果按以上这些，拼凑一下也能实现，但代码要写很长，且复用性不强。

于是冒出了一个想法，尝试写一个方法，去处理已知的关于复选框以及文本的各种控制。

结果

按照以上思路，写了如下程序。注释里写了代码的作用。喜欢的小伙伴们请关注、点赞、评论。大家的鼓励是我持续创作的动力。感谢！

<script type="text/javascript">
// 定义存放复选按钮的数组1：运输方式
var checkBoxArray1 = [];
checkBoxArray1.push( $("#field11535")); //汽运送货
checkBoxArray1.push( $("#field11536")); //客户自提

// 定义存放复选按钮的数组2：运费承担
var checkBoxArray2 = [];
checkBoxArray2.push( $("#field11537")); //供方承担
checkBoxArray2.push( $("#field11538")); //需方承担

// 定义存放复选按钮的数组2：付款方式
var checkBoxArray3 = [];
checkBoxArray3.push( $("#field11540"));       //电汇
checkBoxArray3.push( $("#field11541"));       //承兑
checkBoxArray3.push( $("#field11542"));       //其它

// 运输方式的字符串拼接，专门负责拼接字符串的。
// 参数1：当前控件，参数2：数组，参数3：文件框，参数4：选择方式（单选：S；多选：M）
function checkboxProcess(obj, checkBoxArray, strBox, selectMode) {
str = "";
// 如果是单选模式，检查当前复选框的选中状态，如果当前复选框是选中状态，遍历数组，取消其它复选框的选中状态。
if(selectMode == "S") {
if(obj.prop("checked")) {
for(var index = 0; index<checkBoxArray.length; index++) {
if(obj.attr('id') != checkBoxArray[index].attr("id")) {
checkBoxArray[index].prop("checked", false);
checkBoxArray[index].next("span").prop("class", "jNiceCheckbox");
}
}
}
str = obj.attr("temptitle"); //单选
}

// 如果是多选模式，只做字符串的拼接。
if(selectMode == "M") {
for(var index = 0; index<checkBoxArray.length; index++) {
if(checkBoxArray[index].prop("checked")) {
str = str + checkBoxArray[index].attr("temptitle") + "、"; //多选
}
}
}
strBox.val(str);
}

// 为控件绑定事件
jQuery(document).ready(function(){
for(var index = 0; index<checkBoxArray1.length; index++) {
checkBoxArray1[index].click(function(){
checkboxProcess($(this), checkBoxArray1, $("#field11543"), "S");
});
}
for(var index = 0; index<checkBoxArray2.length; index++) {
checkBoxArray2[index].click(function(){
checkboxProcess($(this), checkBoxArray2, $("#field11544"), "S");
});
}
for(var index = 0; index<checkBoxArray3.length; index++) {
checkBoxArray3[index].click(function(){
checkboxProcess($(this), checkBoxArray3, $("#field11545"), "M");
});
}
});
</script>