Question

嗨我想在我选择一个复选框时进行设计。这是我写的一个小的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个复选框。我想让ui像我选择一个复选框名称“network”复选框名称服务器出现，当我选中复选框名称服务器复选框Internet出现。

Answer 1

<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以更干净的方式执行此操作，并且不会普遍支持类似的方法。

每次折叠树时，这也将清除复选框的状态。

只需单击一个复选框，就必须在同一页面中打开新复选框

1 个答案: