在健康日志中要实现这样的功能。通过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标签不会自动刷新,需要我们自己手动判断赋值。
分享到:
相关推荐
gnuradio用脚本安装,记录了在终端中的安装日志。
RF Micro Devices公司日前宣布推出全面的POLARIS 2 TOTAL RADIO模块解决方案,该解决方案包括一个蜂窝收发器模块和一个蜂窝发送模块,这两个模块均用于在GSM/GPRS及GSM/GPRS/EDGE网络上运行的手机。该模块解决...
该工程主要是通过jsp和radio控件,利用JavaScript技术,简单判断radio控件是否选中,并且获取radio控件的值
原理就是:一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值. <form id=userlist method=post action=option.php> <input type=radio name=userid value=1>1 <input type=radio name=...
ASP.NET C#页面传值( Querystring / Session /Server.Transfer /Application /Cookie)实例化的讲解 直观易懂 一看就会
下面小编就为大家带来一篇js中获取jsp表单中radio类型的值简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
buildGNURadio脚本安装日志,供大家参考。使用前请先在我的资源中下载GNURadio的Python安装脚本。
本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式。效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个“active”的样式。 代码如下: <!--index.wxml--> <radio ...
understanding GNU radio and how to deal with it
在GNU Radio中编写自定义信号处理模块
Gnu Radio FM radio Tx Rx
vs2010,参考 http://blog.csdn.net/infoworld/article/details/39451125,改进例子,实现 复选框和单选框的透明背景,其他其他控件也可以用.
function RadioCheck() { var Radio=document .getElementsByName ("rdoSelect"); for (var j=0;j<Radio .length ;j++) { if (Radio[j].checked) { document .getElementById ("USRNUM").value=Radio [j]....
<input type="radio" name="address" value="北京">北京 <input type="radio" name="address" value="沈阳">沈阳 <input type="radio" name="address" value="南京">南京 <input type="radio" name=...
使用gnuradio实现SSB调制解调
GNU_Radio GNU radio is a free/open-source software toolkit for and the content is controlled by a handful of organizations. Cell building software radios, in which software defines the phones are a ...
对于gnuradio的初学这来说在安装gnuradio是个很棘手的问题 自己也是摸索出来的 相互交流
在页面开发时很多时候,需要对html原生radio做美化,封装。此处通过div实现radio功能,功能完善,可初始化,传值,回调,使用方便。
GNU RADIO入门级培训资料。
android radio,recovery前必备radio