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

起因

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

经过

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

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

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

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

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

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

结果

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

<!-- script代码，如果需要引用js文件，请使用与HTML中相同的方式。 --> <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>