【分享】单选框JS响应点击，填写和查看JS特效。

bxpcn

up by bxpcn 2016-03-03
完整表单源码。
用法：新建一个工作流表单，切换到源码，粘贴，再切换到表单，保存，预览，即可使用。
【售前支持申请单】工作流设计表单，完整源代码。
发帖超数，改用TXT附件。
TXT附件不支持。。。压缩成ZIP了。



有疑问再继续交流。

设计需求，看2、3、4。。。楼的回帖。


DATA_9是单选框控件，看源码，不是标准RADIO控件。
DATA_9有5个单选项，设计是选中后，对应的文字<font size="4" id="lcf1">到5，自动变红色。
在JS中中加入以下代码，不生效。。。
想做成函数，又找不到RADIO触发的入口。。。

请教各位单选框的触发实现。。。

1. var allradio=document.getElementsByName("DATA_9");
   
2. for(var i=0;i<allradio.length;i++){
   
3.         allradio[i].onclick=function(){
   
4.                 var num=1;
   
5.                 for(var x=0;x<allradio.length;x++){
   
6.                         if(this==allradio[x]){
   
7.                                 num=x;
   
8.                         }
   
9.                 }
   
10.                 for(var j=1;j<=5;j++){
    
11.                         var label=document.getElementById("lcf"+j);
    
12.                         if(num==j-1){
    
13.                                 label.color="red";
    
14.                         }else{
    
15.                                 label.color="#000000";
    
16.                         }
    
17.                 }
    
18.         }
    
19. }
    

复制代码

通达史长根

您好，目前有关js特效这边指导不了。您可以尝试在其它地方搜索一下，如果js没有生效，在控制台里面是可以看到js报错的。希望我的回答可以帮到您。

bxpcn

只能自己整了。。。

正在改善页面显示：
单选框，n=1到5选项；
选n则显示表单n，其他隐藏并清空值；
改善业务员填写工作流的界面效果，更直观，减少误填项。

bxpcn

这个需求是：填单人员错点/乱点/乱填内容时，导致多分支按条件跳转识别不准确。

不得不去改善填单界面。。。填什么就只显示什么，其他隐藏并清空值。

bxpcn

优化-1，搞定，效果如下。






继续做 优化-2，选N显示N表单，隐藏其他表单并恢复初始值。

bxpcn

一通百通
搞明白怎样在工作流里面加JS，剩下就简单了。

红字特效花了2天时间折腾，
这次优化工作流，隐藏表单，几分钟就搞定了。
效果如下：

选中和隐藏，对于选中表单。


完整JS源码分享：

1. var allradio=document.getElementsByName("DATA_9");
   
2.         for(var i=0;i<allradio.length;i++){
   
3.                 allradio[i].onclick=function(){
   
4.                         var num=1;
   
5.                         for(var x=0;x<allradio.length;x++){
   
6.                                 if(this==allradio[x]){
   
7.                                         num=x;
   
8.                                 }
   
9.                         }
   
10.                         for(var j=1;j<=5;j++){
    
11.                                 var label=document.getElementById("lcf"+j);
    
12.                                 if(num==j-1){
    
13.                                         document.getElementById( "ltr"+j).style.display= "";
    
14.                                         label.color="red";
    
15.                                 }else{
    
16.                                         document.getElementById( "ltr"+j).style.display= "none";
    
17.                                         label.color="#000000";
    
18.                                 }
    
19.                         }
    
20.                 }
    
21.         }

复制代码

bxpcn

熟练使用JS的同学，
请加我Q 3375-79715 ，很多工作流的解决方案二开，需要用到JS实现。

请同学们多多指教。

bxpcn

工作流JS效果，除打印外，分2种显示效果。

1.是填写表单。
如楼上JS特效。

2.是表单查看。
需要额外添加JS代码，如下。

1. <script language="jscript">
   
2.     var radiosk = document.getElementsByName("DATA_9");
   
3.     for(var i=0;i<radiosk.length;i++)
   
4.     {
   
5.         if(radiosk[i].checked)
   
6.         {
   
7. document.getElementById( "ltr"+(i+1)).style.display= "";
   
8. //alert(radiosk[i].value);
   
9.         }  else {
   
10. document.getElementById( "ltr"+(i+1)).style.display= "none";
    
11. }
    
12. 
    
13.     }  
    
14. </script>

复制代码

效果是：只显示选中的表单，其他隐藏。

bxpcn

手机用户，新建工作流，所有JS特效统统失效。
可惜了。

hzshopping

bxpcn 发表于 2015-7-10 22:23
一通百通
搞明白怎样在工作流里面加JS，剩下就简单了。

兄弟， 表单里如何设置，LCF和L定义到什么位置。