hide show

对于div 达到这样效果 三个可供选择的radio 点击后隐藏 显示其中一个 再次点击还原
<div class="time4" id="pressTime" >
<p>
<input type="radio" name="healthLogs.press" id="press"
value="0" ${healthLogs.press==0? "checked=checked":""} onclick="showOrHidePress(this)">
很大
</p>
<p>
<input type="radio" name="healthLogs.press" id="press"
value="1" ${healthLogs.press==1? "checked=checked":""} onclick="showOrHidePress(this)">
较大
</p>
<p>
<input type="radio" name="healthLogs.press" id="press"
value="2" ${healthLogs.press==2? "checked=checked":""} onclick="showOrHidePress(this)">
一般
</p>
</div>
<div align='center' id="press_luccs" style='line-height:105px;display: none;' onclick='restore()'></div>


js设计：
function showOrHidePress(obj) {//obj传值 传递被选中对象的id
var radio = obj.value;
    document.getElementById('pressTemp').value = radio;
    $("#press_luccs").show();
    $("#pressTime").hide();
if (radio == 0) {
$('#press_luccs')
.html(
"<font color='black' size='4' face='arial'>很大</font>");
} else if (radio == 1) {
$('#press_luccs')
.html(
"><font color='black' size='4' face='arial'>较大</font>");
} else if (radio == 2) {
$('#press_luccs')
.html(
"<font color='black' size='4' face='arial'>一般</font>");
}

}

function restore(){
$("#pressTime").show();
$("#press_luccs").hide();
}
代码编写的时候 因为div很多是相同的，可以抽象出来放在jsp中，js中只设计逻辑操作。