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

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

  在这里点击radio的时候，就将原来的额隐藏，用一个label显示。这个功能的实现，需要
需要将值传递到js中。
一下是开始的时候的代码(为点击前)
<div class="time4" id="moodTime">
<p class="p1">
<input type="radio" name="healthLogs.mood" value="0"
${healthLogs.mood==0? "checked=checked
":""}  onclick="showOrHide(this)">
很好
</p>
<p class="p1">
<input type="radio" name="healthLogs.mood" value="1"
${healthLogs.mood==1? "checked=checked
":""} onclick="showOrHide(this)">
一般
</p>
<p class="p1">
<input type="radio" name="healthLogs.mood" value="2"
${healthLogs.mood==2? "checked=checked
":""} onclick="showOrHide(this)">
很差
</p>
</div>


点击后的代码：
<div align='center' id="mood_luccs"
style='line-height: 105px; display: none;'
onclick='restore_mood()' onmouseover="move_mood()"
onmouseout="hide_mood()"></div>

通过传值，实现两个div的显示和隐藏。
具体实现：
function showOrhideComm(mood,press){
      showPress(press);
      showMood(mood);
     }
    
     function  showPress(press){
        document.getElementById('pressTemp').value = press;
        $("#press_luccs").show();
$("#pressTime").hide();
if (press == 0) {
$('#press_luccs').html(
"<font color='black' size='4' face='arial'>很大</font>");
} else if (press == 1) {
$('#press_luccs').html(
"<font color='black' size='4' face='arial'>较大</font>");
} else if (press == 2) {
$('#press_luccs').html(
"<font color='black' size='4' face='arial'>一般</font>");
}
     }
    
      function  showMood(mood){
        document.getElementById('moodTemp').value = mood;
        $("#mood_luccs").show();
$("#moodTime").hide();
if (mood== 0) {
$('#mood_luccs').html(
"<font color='black' size='4' face='arial'>很好</font>");
} else if (mood == 1) {
$('#mood_luccs').html(
"<font color='black' size='4' face='arial'>一般</font>");
} else if (mood == 2) {
$('#mood_luccs').html(
"<font color='black' size='4' face='arial'>很差</font>");
}
     }

这里在jsp文件中 用onclick="showOrHide(this)"将所选radio的值传到后台
在js中，函数写法
function showOrHide(obj) {

var radio = obj.value;
showMood(radio)

}

通过obj接受传值
   function  showMood(mood){
        document.getElementById('moodTemp').value = mood;
        $("#mood_luccs").show();
$("#moodTime").hide();
if (mood== 0) {
$('#mood_luccs').html(
"<font color='black' size='4' face='arial'>很好</font>");
} else if (mood == 1) {
$('#mood_luccs').html(
"<font color='black' size='4' face='arial'>一般</font>");
} else if (mood == 2) {
$('#mood_luccs').html(
"<font color='black' size='4' face='arial'>很差</font>");
}
     }
然后通过传值，根据值得不同进行变化隐藏。

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

然后提交表单的时候，要传值到后台。我这里由于要达到部分刷新的效果，所以使用ajax提交，并用json数据返回。
以前不用json数据传输，直接返回的void的时候，页面自动刷新，radio的值会自动变化，但是了通过json传输后，radio的值没有变化，说明不能自动刷新，这时需要自己判断赋值，使radio的值变化。


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

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

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