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

Question

我有一个申请表，我需要在其中隐藏 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>

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

Answer 1

您能否替换所有可见性样式实例以显示

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

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

在你的 Js 部分

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

                           or

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

这将解决您的问题。

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

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

问题描述

2 个解决方案

解决方案1
0 2020-12-03 19:17:34

解决方案2
0 2020-12-05 05:24:23

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

问题描述

2 个解决方案

解决方案1 0 2020-12-03 19:17:34

解决方案2 0 2020-12-05 05:24:23

解决方案1
0 2020-12-03 19:17:34

解决方案2
0 2020-12-05 05:24:23