jsp页面中点击（checkbox）或者radio隐藏tr

最新推荐文章于 2023-02-22 09:56:59 发布

原创最新推荐文章于 2023-02-22 09:56:59 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsp

jsp页面中点击（checkbox）或者radio隐藏tr 专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何在JSP页面上，通过JavaScript实现点击checkbox来控制与之关联的表格行（tr）的隐藏和显示。当用户勾选checkbox时，对应的Oracle用户名和密码输入行将显示；取消勾选则隐藏这些行。实现这一功能的关键在于JavaScript的`changeOracle`函数，它根据checkbox的状态改变tr元素的`display`样式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>点击checkbox 隐藏展现某行</title>
<script>
function changeOracle(){
document.getElementById("oracle1").style.display = (document.getElementById("oracle1").style.display=="")?"none":"";
document.getElementById("oracle2").style.display = (document.getElementById("oracle2").style.display=="")?"none":"";
}
</script>
</head>
<body>
<table>
<tr>
<td >
是否安装Oracle服务器：
</td>
<td>
<input type="checkbox" id="oracle" name="oracle" value="1" onclick="changeOracle();" />
 
</td>
<td ></td>
<td ></td>
</tr>
<tr id="oracle1" style="display:none;">
<td >
Oracle用户名：
</td>
<td >
<input type = "text" name = "oracleUsername"/>
</td>
<td>
Oracle密码：
</td>
<td >
<input type = "text" name = "oraclePassword"/>
</td>
</tr>
<tr id="oracle2" style="display:none;">
<td>
Oracle全局数据库名：
</td>
<td >
<input type = "text" name = "oracleDbName"/>
</td>
<td ></td>
<td ></td>
</tr>
</table>
</body>
</html>