`
luccs624061082
  • 浏览: 84779 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

服务网健康日志中 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标签不会自动刷新,需要我们自己手动判断赋值。
分享到:
评论

相关推荐

    js中获取jsp表单中radio类型的值简单实例

    本文将通过一个简单实例,讲解如何在JavaScript中获取JSP表单中单选按钮(radio)类型的值。 首先,我们需要了解单选按钮(radio)在HTML表单中的基本用法。单选按钮允许用户在一组选项中选择一个值,它通常使用`...

    gnuradio配置日志

    gnuradio用脚本安装,记录了在终端中的安装日志。

    ASP单选按钮实现页面跳转并传值

    在 ASP 编程中,实现单选按钮的页面跳转并传值是非常常见的需求。下面,我们将详细介绍如何使用 ASP 实现单选按钮的页面跳转并传值。 首先,让我们了解一下单选按钮的基本概念。在 HTML 中,单选按钮是通过 `...

    jsp中radio控件的使用

    在JavaServer Pages (JSP) 中,`radio` 控件是一种单选按钮,常用于创建一组选项,用户只能选择其中一个。本项目展示了如何在JSP页面中使用`radio`控件,结合JavaScript进行用户交互处理,如判断是否选中以及获取...

    GNURadio.rar_GNU Radio_gnuradio_gnuradio 开发_gnuradio官网_gunradio

    在"GNURadio.rar_GNU Radio_gnuradio_gnuradio 开发_gnuradio官网_gunradio"这个压缩包中,包含了与GNU Radio相关的各种资源,帮助用户理解和学习如何使用它。 首先,"gnuradio.pdf"可能是GNU Radio的官方文档或...

    Java中参数传值的代码清单.pdf

    在上述代码中,`Radio`类的`openRadio`方法模拟了收音机耗电的过程,通过`battery`参数(实际上是`Battery`对象的引用)减少电池的电量。在`main`方法中,`nanfu`对象的电量被初始化为100,然后传递给`openRadio`...

    html中radio值的获取、赋值、注册事件示例详解

    需要注意的是,如果你移除了所有radio的选中状态,那么可能导致这组radio中没有任何一个处于选中状态,这在某些表单验证中可能是一个问题。 4. 注册事件 当radio的选中状态发生变化时,我们可能需要执行一些操作,...

    农产品肉类蔬菜可追溯平台的业务和技术解决方案-2.0.docx

    农产品肉类蔬菜可追溯平台的业务和技术解决方案-2.0.docx 本文将详细介绍农产品肉类蔬菜可追溯平台的业务和技术解决方案,涵盖平台简介、系统实现方案、肉类蔬菜追溯监管平台构成、平台功能介绍、项目实施方案和...

    单选框、复选框、下拉框的使用及跨页面传值

    在Android应用开发中,用户界面的设计至关重要,其中单选框(RadioButtons)、复选框(CheckBoxes)和下拉框(Spinner)是常见的交互元素,它们用于收集用户的选择信息或控制用户界面的状态。本教程将深入讲解这三种...

    ASP.NET C#页面传值汇总

    ### ASP.NET C# 页面传值方法详解 在ASP.NET Web应用程序开发中,页面间的数据传递是常见需求之一。本文将详细介绍几种常用的页面间数据传递方式:Querystring、Session、Server.Transfer、Application以及Cookie,...

    LTE的语音解决方案

    然而,由于初期的LTE网络不支持传统的电路交换(CS)语音服务,因此需要采用特定的语音解决方案来确保用户能够进行语音通话。本篇文章将详细探讨两种主要的LTE语音解决方案:CSFB(Circuit-Switched Fallback)和...

    JavaScript中获取Radio被选中的值

    原理就是:一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值. &lt;form id=userlist method=post action=option.php&gt; &lt;input type=radio name=userid value=1&gt;1 &lt;input type=radio name=...

    非常好的GPRS解决方案

    GPRS(General Packet Radio Service)是一种移动通信技术,属于2.5G网络,它在GSM网络的基础上提供了分组交换服务,使得数据传输更高效、更灵活。在本压缩包中,"非常好的GPRS解决方案"可能包含了一套完整的GPRS...

    div仿radio插件

    总之,"div仿radio插件"是一个强大的工具,它结合了jQuery的便利性和自定义div的灵活性,提供了美观且可定制的单选按钮解决方案。无论你是前端开发者还是设计师,都能从中受益,提升项目的用户体验。在实际使用时,...

    智慧井盖管理解决方案共17页.ppt

    城市井盖管理解决方案是针对当前城市管理中井盖管理存在的诸多问题而提出的创新性技术应用,旨在提高城市基础设施的安全性和管理效率。传统的井盖管理存在诸如数量庞大、分布广泛、环境复杂、责任不明、管理标准不...

    GNU-Radio中文入门教程_LTE-A_

    在本教程中,我们将深入探讨 GNU Radio 的基础知识,并结合 LTE-A(Long Term Evolution - Advanced)技术,帮助初学者理解如何利用这个强大的工具进行无线通信系统的开发。 1. **GNU Radio 概述** - GNU Radio 是...

    RFMD的POLARIS 2 TOTAL RADIO模块解决方案面向EDGE..

    RFMD的POLARIS 2 TOTAL RADIO模块解决方案是一款专为GSM/GPRS和GSM/GPRS/EDGE网络设计的高效能、小型化和经济型的无线通信模块。这个解决方案包括两个关键部分:蜂窝收发器模块(RF6026)和蜂窝发送模块(RF3178),...

    LTE网络中CSFB语音与短信解决方案.pptx

    LTE 网络中 CSFB 语音与短信解决方案 CSFB(Circuit-Switched Fallback)是一种解决 LTE 网络中语音和短信业务的技术方案。该方案主要用于 LTE 网络中,提供语音和短信业务支持。下面是 CSFB 方案的详细知识点: ...

    智慧校园网解决方案.pptx

    总的来说,智慧校园网解决方案通过简约、实用和开放的策略,为教育机构提供了适应未来发展趋势的网络基础设施,旨在提高教学效率,降低运维复杂度,确保教育服务的稳定性和可靠性,同时为师生创造更好的学习和生活...

    RFID道路资产管理解决方案.pdf

    RFID 道路资产管理解决方案是基于 Radio Frequency Identification(射频识别)技术的一种创新解决方案,旨在提高道路资产的管理效率和 accuracy。该解决方案通过在道路资产上安装 RFID 标签,实时追踪和监控道路...

Global site tag (gtag.js) - Google Analytics