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

【问题标题】：1st radio button triggers opening of a second radio button form第一个单选按钮触发打开第二个单选按钮表单
【发布时间】：2014-05-13 02:58:49
【问题描述】：

这是我编码旅行的下一集 :) 这一集我想要一些帮助来创建通过选择其他单选按钮触发的单选按钮表单。至于我可以让单个 Radio 出现，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>

感谢您的意见。

【问题讨论】：

标签： javascript html radiobuttonlist

【解决方案1】：

您可以使用 div 来实现这一点，将表单放在一个 div 中，将文本区域放在另一个具有您已经提供的 ID 的 div 中：

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

【讨论】：

不客气！如果我的回答有用，请点赞。
我会，但我还没有代表：'(