Question

这是我编码旅行的下一集:) 这一集我想通过选择其他单选按钮触发创建单选按钮表单。至于我可以制作一个单独的收音机，3只是不会出现或显示而不是保持隐藏，直到我点击适当的收音机。

我想出了：

<html>
    <head>
      <script type="text/javascript">
        function showB() { document.getElementById('area2').style.display = 'block'; }
        function showC() { document.getElementById('area').style.display = 'block'; }
        function hideB() { document.getElementById('area2').style.display = 'none'; }
        function hideC() { document.getElementById('area').style.display = 'none'; }
      </script>
    </head>
    <body>        
      <form name="radios">
        <INPUT TYPE=RADIO NAME="X" VALUE="H" onclick="hideB();hideC()"/>A 
        <INPUT TYPE=RADIO NAME="X" VALUE="L" onclick="showB();hideC()"/>B 
        <INPUT TYPE=RADIO NAME="X" VALUE="LL" onclick="showC();hideB()"/>C
            <form name="radios2" id="area2" style="display:none;">
            <INPUT TYPE=RADIO NAME="Y" />
            <INPUT TYPE=RADIO NAME="Y" />
            <INPUT TYPE=RADIO NAME="Y" />
            </form>
        <TEXTAREA id="area" style="display: none;" NAME="data" ROWS=10 COLS=50></TEXTAREA>
      </form>
    </body>
</html>

但它不起作用，你会看到。

如果我改为仅显示1个单选按钮，它可以工作，但这不是我的目标：

<html>
    <head>
      <script type="text/javascript">
        function showB() { document.getElementById('area2').style.display = 'block'; }
        function showC() { document.getElementById('area').style.display = 'block'; }
        function hideB() { document.getElementById('area2').style.display = 'none'; }
        function hideC() { document.getElementById('area').style.display = 'none'; }
      </script>
    </head>
    <body>        
      <form name="radios">
        <INPUT TYPE=RADIO NAME="X" VALUE="H" onclick="hideB();hideC()"/>A 
        <INPUT TYPE=RADIO NAME="X" VALUE="L" onclick="showB();hideC()"/>B 
        <INPUT TYPE=RADIO NAME="X" VALUE="LL" onclick="showC();hideB()"/>C
<INPUT TYPE=RADIO NAME="Y" id="area2" style="display:none;"/>
        <TEXTAREA id="area" style="display: none;" NAME="data" ROWS=10 COLS=50></TEXTAREA>
      </form>
    </body>
</html>

感谢您的意见。

Answer 1

您可以使用div来实现此目的，将表单放在div中，将文本区域放在另一个div中，并使用您已经给出的ID：

<html>
<head>
  <script type="text/javascript">
    function showB() { document.getElementById('area2').style.display = 'block'; }
    function showC() { document.getElementById('area').style.display = 'block'; }
    function hideB() { document.getElementById('area2').style.display = 'none'; }
    function hideC() { document.getElementById('area').style.display = 'none'; }
  </script>
</head>
<body>        
  <form name="radios">
    <INPUT TYPE=RADIO NAME="X" VALUE="H" onclick="hideB();hideC()"/>A 
    <INPUT TYPE=RADIO NAME="X" VALUE="L" onclick="showB();hideC()"/>B 
    <INPUT TYPE=RADIO NAME="X" VALUE="LL" onclick="showC();hideB()"/>C

        <div id="area2" style="display:none">
            <form name="radios2">
            <INPUT TYPE=RADIO NAME="Y" />
            <INPUT TYPE=RADIO NAME="Y" />
            <INPUT TYPE=RADIO NAME="Y" />
            </form>
        </div> 

        <div id="area" style="display:none"> 
            <TEXTAREA NAME="data" ROWS=10 COLS=50></TEXTAREA>
        </div>

  </form>
</body>

第一个单选按钮触发打开第二个单选按钮表单

1 个答案: