单击一个复选框后，必须在同一页中打开新复选框
单击一个复选框后，必须在同一页中打开新复选框
提问于 2014-05-20 17:19:32
嗨，我想做设计时，我选择了一个复选框。这是我写的一小段html代码
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Example</title>
</head>
<body>
<form method="post" action="demo3.jsp">
Networking: <br><input type="checkbox" name="name" value="network" />network<br>
<input type="checkbox" name="name" value="server" />server<br>
<input type="checkbox" name="name" value="internet" />int<br>
<input type="submit" value="go">
</form>
</body>
</html>这里有3个复选框。我想要的用户界面，当我选择一个复选框名为“网络”时，复选框名称服务器出现，当我选择复选框名称服务器复选框互联网出现。
回答 1
Stack Overflow用户
发布于 2014-05-20 17:40:02
<input type="checkbox" id="network" name="name" value="network" onClick="revealServer();" />network<br>
<div id="serverBox" style="display:none;">
<input type="checkbox" id="server" name="name" value="server" onClick="revealInternet();" />server<br>
</div>
<div id="internetBox" style="display:none;">
<input id="internet" type="checkbox" name="name" value="internet" />int<br>
</div>
<script type="text/javascript">
function revealServer() {
var network = document.getElementById('network');
var serverBox = document.getElementById('serverBox');
if(network.checked == true) {
serverBox.style.display = "block";
document.getElementById('server').checked = false;
document.getElementById('internet').checked = false;
} else {
serverBox.style.display = "none";
document.getElementById('internetBox').style.display = "none";
}
}
function revealInternet() {
var server = document.getElementById('server');
var internetBox = document.getElementById('internetBox');
if(server.checked == true) {
internetBox.style.display = "block";
document.getElementById('internet').checked = false;
} else {
internetBox.style.display = "none";
}
}
</script>抱歉，对于所有的getElementById调用，您可以使用JQuery和getElementByTagName以一种更简洁的方式完成此操作，并且类似的方法并不是普遍支持的。
这还将在每次折叠树时清除复选框的状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23755741
复制相关文章
相似问题
腾讯云开发者
