起因
今天同事发来需求,要做一个工作流,其中表单里有几组选项。在纸质单上是留出位置画勾选择的。简单的聊了一下对填报的要求,要求有的组要控制单选,有的组还不需要制多选。用文字来描述很晦涩,看到表单估计小伙伴们就知道什么意思了。表单如下图,其中“运输方式”和“运费承担”的选项之间是要做单选控制的,付款方式则不用。
![](https://i-blog.csdnimg.cn/blog_migrate/351c1cf83ba1944ea7d64439e4671f7b.png)
经过
选去回顾了去年处理复选框的经历,看看有哪个能直接拿过来用的。
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> |