On a click of one check box new check box has to open in a same page

Question

Hi i want to make design where when i select a one checkbox. here is a small html code which i write

<%@ 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>

here there are 3 check box. i want to make ui like when i select one checkbox name "network" the check box name server appear, when i select check box name server checkbox Internet appear.

Look at this link, I think is the thing you want to do: http://stackoverflow.com/questions/1925614/javascript-change-form-action-based-on-selection — ganzux, May 20 '14 at 09:24
what do you mean by appears? Do you want to check server checkbox when network checkbox is checked or vice-versa? or its related to visibility of the check boxes? — Braj, May 20 '14 at 09:33

score 1 · Answer 1 · answered May 20 '14 at 09:40

<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>

Sorry for all the getElementById calls, you could probably do this in a cleaner way with JQuery and getElementByTagName and similar methods aren't universally supported.

This will also clear the state of the checkboxes when you collapse the tree each time.

thank you very much man it means a lot for my college project..:) — user3471546, May 20 '14 at 10:02

On a click of one check box new check box has to open in a same page

1 Answers1