服务网健康日志中 radio传值解决方案

在健康日志中要实现这样的功能。通过radio选择，在指针点击的时候变成另一种状态，并将值传递到后台，在进入健康日志页面的时候，执行查询功能，但不是显示radio值。 

 

  在这里点击radio的时候，就将原来的额隐藏，用一个label显示。这个功能的实现，需要 

需要将值传递到js中。 

一下是开始的时候的代码(为点击前) 

1. <div class="time4" id="moodTime"> 
2. <p class="p1"> 
3. <input type="radio" name="healthLogs.mood" value="0" 
4. ${healthLogs.mood==0? "checked=checked 
5. ":""}  onclick="showOrHide(this)"> 
6. 很好 
7. </p> 
8. <p class="p1"> 
9. <input type="radio" name="healthLogs.mood" value="1" 
10. ${healthLogs.mood==1? "checked=checked 
11. ":""} onclick="showOrHide(this)"> 
12. 一般 
13. </p> 
14. <p class="p1"> 
15. <input type="radio" name="healthLogs.mood" value="2" 
16. ${healthLogs.mood==2? "checked=checked 
17. ":""} onclick="showOrHide(this)"> 
18. 很差 
19. </p> 
20. </div> 

点击后的代码： 

1. <div align='center' id="mood_luccs" 
2. style='line-height: 105px; display: none;' 
3. onclick='restore_mood()' onmouseover="move_mood()" 
4. onmouseout="hide_mood()"></div> 

 

通过传值，实现两个div的显示和隐藏。 

具体实现： 

1. function showOrhideComm(mood,press){ 
2.       showPress(press); 
3.       showMood(mood); 
4.      } 
5.      
6.      function  showPress(press){ 
7.         document.getElementById('pressTemp').value = press; 
8.         $("#press_luccs").show(); 
9. $("#pressTime").hide(); 
10. if (press == 0) { 
11. $('#press_luccs').html( 
12. "<font color='black' size='4' face='arial'>很大</font>"); 
13. } else if (press == 1) { 
14. $('#press_luccs').html( 
15. "<font color='black' size='4' face='arial'>较大</font>"); 
16. } else if (press == 2) { 
17. $('#press_luccs').html( 
18. "<font color='black' size='4' face='arial'>一般</font>"); 
19. } 
20.      } 
21.      
22.       function  showMood(mood){ 
23.         document.getElementById('moodTemp').value = mood; 
24.         $("#mood_luccs").show(); 
25. $("#moodTime").hide(); 
26. if (mood== 0) { 
27. $('#mood_luccs').html( 
28. "<font color='black' size='4' face='arial'>很好</font>"); 
29. } else if (mood == 1) { 
30. $('#mood_luccs').html( 
31. "<font color='black' size='4' face='arial'>一般</font>"); 
32. } else if (mood == 2) { 
33. $('#mood_luccs').html( 
34. "<font color='black' size='4' face='arial'>很差</font>"); 
35. } 
36.      } 

这里在jsp文件中 用onclick="showOrHide(this)"将所选radio的值传到后台 

在js中，函数写法 

1. function showOrHide(obj) { 
2. var radio = obj.value; 
3. showMood(radio)
4. } 

 

通过obj接受传值 

1.    function  showMood(mood){ 
2.         document.getElementById('moodTemp').value = mood; 
3.         $("#mood_luccs").show(); 
4. $("#moodTime").hide(); 
5. if (mood== 0) { 
6. $('#mood_luccs').html( 
7. "<font color='black' size='4' face='arial'>很好</font>"); 
8. } else if (mood == 1) { 
9. $('#mood_luccs').html( 
10. "<font color='black' size='4' face='arial'>一般</font>"); 
11. } else if (mood == 2) { 
12. $('#mood_luccs').html( 
13. "<font color='black' size='4' face='arial'>很差</font>"); 
14. } 
15.      } 

然后通过传值，根据值得不同进行变化隐藏。 

 

上述实现了两个div的隐藏和显示。要注意的是在jsp和js中如何传值 

 

然后提交表单的时候，要传值到后台。我这里由于要达到部分刷新的效果，所以使用ajax提交，并用json数据返回。 

以前不用json数据传输，直接返回的void的时候，页面自动刷新，radio的值会自动变化，但是了通过json传输后，radio的值没有变化，说明不能自动刷新，这时需要自己判断赋值，使radio的值变化。 

 

1. var press = document.getElementsByName('press'); 
2. for(var i=0;i<press.length;i++ ){ 
3. if(press[i].value==data.press){ 
4. press[i].checked=true; 
5. } 
6. } 

 

上述就是通过getElementsByName获取press的值，不过此时的press是数组。data.press的值是后台通过json传输过来的。就如上述逻辑一样，相等的话 此radio就被选中 即 

press[i].checked = true; 

 

这里主要是说 如果通过json传输，radio标签不会自动刷新，需要我们自己手动判断赋值。

原文参考自站长网http://www.software8.co/wzjs/jsp/2504.html