如何根据用户输入隐藏表单上的输入答案

【问题标题】：How can I hide inputs on a form based upon user input如何根据用户输入隐藏表单上的输入
【发布时间】：2021-03-15 20:31:56
【问题描述】：

我有一个申请表，我需要在其中隐藏 2 个不同的部门/部分，直到用户单击“是”单选按钮，然后隐藏的部门/部分才会出现。我尝试了不同的解决方案并且接近了我想要的，但是对于当前的代码，隐藏的分区/部分是一个很大的空白区域。 这是我希望实现的目标： 首次打开表单时，输入的分区/部分是隐藏的，并且没有空格。当用户单击“是”单选按钮时，隐藏的部门/部分将出现，下面的字段将向下移动。将有两个隐藏的分区/部分，因此每个部分的代码可能会有一些独特的字符。

到目前为止，这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="EWATV Membership Application">
    <meta name="apple-mobile-web-app-title" content="EWATV Mbr App">
    <title>EWATV Membership Application</title>
    
    <!-- Script used for displaying CBO section:
         Source for following script: https://codepen.io/Zillionx/pen/xwOxoW
    -->
    <script>
      function CBO_Check()
      {
        if (document.getElementById('CBO_Yes').checked)
        {
          document.getElementById('ifYes').style.visibility = 'visible';
        }
        else document.getElementById('ifYes').style.visibility = 'hidden';
      }
    </script>
  </head>
  <body>
    <br><br>
    Do you represent a CBO?
    <br>
    Yes <input type="radio" onclick="javascript:CBO_Check();" name="yesno" id="CBO_Yes">
     No <input type="radio" onclick="javascript:CBO_Check();" name="yesno" id="CBO_No">
    <br>
    <div id="ifYes" style="visibility:block">
      <table>
        <tr class="TEXT-ALIGN-CENTER TEXT-SIZE-20PT TEXT-COLOR-LIME-GREEN">
          <th colspan="2" id="CBO_INFO">Club / Business / Organization (CBO)</th>
        </tr>
        <tr>
          <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
            <label for="CBO_NAME">CBO name:</label>
          </td>
          <td class="TEXT-ALIGN-LEFT">
            <input type="text" name="CBO_NAME" id="CBO_NAME" size="65">
          </td>
        </tr>
        <tr>
          <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
            <label for="CBO_MAIL_ADDRESS">CBO Mail address:</label>
          </td>
          <td class="TEXT-ALIGN-LEFT">
            <input type="text" name="CBO_MAIL_ADDRESS" id="CBO_MAIL_ADDRESS" size="65">
          </td>
        </tr>
      </table>
    </div>
    Do you own an OHV?
    <br>
    Yes <input type="radio" onclick="javascript:OHV_Check();" name="yesno" id="OHV_Yes">
     No <input type="radio" onclick="javascript:OHV_Check();" name="yesno" id="OHV_No">
    <br>
  </body>
</html>

为简洁起见，我从隐藏的分区/部分中删除了一些字段。

【问题讨论】：

How to hide elements without having them take space on the page?

标签： javascript html visibility

【解决方案1】：

能否请将所有 visibility 样式实例替换为 display

在 div 中根据需要添加 display none 或 block

<div id="ifYes" style="display:block">

在你的 Js 部分

 document.getElementById('ifYes').style.display = 'block';

                           or

 document.getElementById('ifNo').style.display = 'none';

这会解决你的问题。

【讨论】：

我做了上面建议的更改，但它没有做任何事情，即无论我点击是还是否，我要隐藏的部门都不会隐藏。

【解决方案2】：

我按照 Abu Sufian 的建议进行了更改，但并没有改变行为。无论我点击是或否，我要隐藏的分区都不会隐藏。

这是我修改/更改的代码，如果我可能误解了要更改的代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="EWATV Membership Application">
    <meta name="apple-mobile-web-app-title" content="EWATV Mbr App">
    <title>EWATV Membership Application</title>
    
    <!-- Script used for displaying CBO section
         Source for following script: https://codepen.io/Zillionx/pen/xwOxoW
    -->
    <script>
      function CBO_Check()
      {
        if (document.getElementById('CBO_Yes').checked)
        {
          document.getElementById('ifYes').style.display = 'visible';
        }
        else document.getElementById('ifYes').style.display = 'hidden';
      }
    </script>
    </head>
    <body>
    <br><br>
    
    Do you represent a CBO?
    <br>
    Yes <input type="radio" onclick="javascript:CBO_Check();" name="yesno" id="CBO_Yes">
     No <input type="radio" onclick="javascript:CBO_Check();" name="yesno" id="CBO_No">
    <br>
    <div id="ifYes" style="display:block">
            <table>
              <tr class="TEXT-ALIGN-CENTER TEXT-SIZE-20PT TEXT-COLOR-LIME-GREEN">
                <th colspan="2" id="CBO_INFO">
                  Club / Business / Organization (CBO)
                </th>
              </tr>
              <tr>
                <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
                  <label for="CBO_NAME">CBO name:</label>
                </td>
                <td class="TEXT-ALIGN-LEFT">
                  <input type="text" name="CBO_NAME" id="CBO_NAME" size="65">
                </td>
              </tr>
              <tr>
                <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
                  <label for="CBO_MAIL_ADDRESS">CBO Mail address:</label>
                </td>
                <td class="TEXT-ALIGN-LEFT">
                  <input type="text" name="CBO_MAIL_ADDRESS" id="CBO_MAIL_ADDRESS" size="65">
                </td>
              </tr>
            </table>
    </div>
    Do you own an OHV?
    <br>
    Yes <input type="radio" onclick="javascript:OHV_Check();" name="yesno" id="OHV_Yes">
     No <input type="radio" onclick="javascript:OHV_Check();" name="yesno" id="OHV_No">
    <br>
    </div>
    </body>
    </html>

【讨论】：