服务网健康日志中 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标签不会自动刷新,需要我们自己手动判断赋值。
原文参考自站长网http://www.software8.co/wzjs/jsp/2504.html