根据单选按钮选择显示/隐藏输入字段答案

【问题标题】：Display/Hide input fields based on radio button selection根据单选按钮选择显示/隐藏输入字段
【发布时间】：2021-10-01 23:17:14
【问题描述】：

我是 JS 和学习的新手。请帮助我更正代码。

输入是：

单选按钮-1；单选按钮 2；
输入字段-set-1；输入字段集 2；输入字段提交。

我想要实现的是：

在页面加载时，只会显示单选按钮 1 和单选按钮 2。点击 radio-button-1 时会显示 input-fields-set-1 和 input-field-submit，但点击 radio-button-2 时会显示 input-fields-set-2 和 input-field-submit。

下面给出了完整的代码。在http://jsfiddle.net/ 上运行它们时，它运行良好，但在网站上单击任何单选按钮时没有出现任何内容。我已将代码上传到https://testing2601.000webhostapp.com/ 用于测试目的，但它无法正常工作。

另外请注意，set-1 和 set-2 中的所有输入字段都是必填字段。

来自 .js 和 .html 文件的完整代码 -

function ageCheck() {
    if  (document.getElementById('below').checked) {
        document.getElementById('ifBelow').style.display = 'block';
        document.getElementById('ifAbove').style.display = 'none';
        document.getElementById('ifChecked').style.display = 'block';
    }
    else if (document.getElementById('above').checked) {
        document.getElementById('ifBelow').style.display = 'none';
        document.getElementById('ifAbove').style.display = 'block';
        document.getElementById('ifChecked').style.display = 'block';
    }
    else    {
        document.getElementById('ifAbove').style.display = 'none';
        document.getElementById('ifBelow').style.display = 'none';
        document.getElementById('ifChecked').style.display = 'none';
    }
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />

</head>
<body >
<div>
  <form method="post" name="childDetails" action="example.php">
    <div class="radioB">
      <div class="a">
        <input type="radio" onclick="javascript:ageCheck();" id="below" name="age" >
        <label for="below">Age of my child is below 4 years.</label>
      </div>
      <div class="a">
        <input type="radio" onclick="javascript:ageCheck();" id="above" name="age" >
        <label for="above">Age of my child is above 4 years.</label>
      </div>                                    
    </div> 
    <div id="ifBelow" class="set-1" style="display: none">
      <div>
        <input type="number" id="dob" name="dob" placeholder="DOB of Child in mmddyy" required />
      </div>                                        
      <div>
        <input type="text" id="name" name="name" placeholder="Name of the child" required />
      </div>
      <div>
        <input type="email" id="email" name="email" placeholder="Your email" />
      </div>
    </div>
    <div id="ifAbove" class="set-2" style="display: none">
      <div>
        <input type="number" id="age" name="age" placeholder="Age of your child" required />
      </div>    
      <div>
        <input type="text" id="name2" name="name2" placeholder="Name of the child" required />
      </div>
      <div>
        <input type="text" id="hobby" name="hobby" placeholder="Hobby of your child" required />
      </div>
      <div>
        <input type="email" id="email-2" name="email-2" placeholder="Your email" />
      </div>
    </div>
    <div id="ifChecked" class="set-3" style="display: none">
      <div class="set-3">
        <input type="checkbox" id="proud" name="proud" required>
        <label for="proud">I am a proud parent.</label>
      </div>                                    
      <div>
        <input type="submit" name="submit" value="Submit" class="primary" />
      </div>
    </div>
  </form>
</div>

<script type="text/javascript" src="/assets/js/main.js"></script>       

</body>
</html>

【问题讨论】：

在您的主机上，您没有包含 jQuery。这导致它失败。但在相关说明中，将您的函数从 (ffunction($) { ... }) (jQuery) 块中取出，以便它在您的 html 所需的全局范围内可用
@AdityaParab，我已经做到了，但是没有用。请您指导我完整的js代码！
它在your project中完美运行
是的，我终于可以做到了。谢谢。

标签： javascript php html jquery css

【解决方案1】：

当我在 https://testing2601.000webhostapp.com/ 查看您的代码时，我看到您的 javascript 代码（来自 main.js）如下，如果是这种情况，则意味着 ageCheck 未附加到全局，因此未为您的 HTML 定义使用，这是你为什么它不工作的根本原因。

(function($) {    
    
    function ageCheck() {
    if  (document.getElementById('below').checked) {
        document.getElementById('ifBelow').style.display = 'block';
        document.getElementById('ifAbove').style.display = 'none';
        document.getElementById('ifChecked').style.display = 'block';
    }
    else if (document.getElementById('above').checked) {
        document.getElementById('ifBelow').style.display = 'none';
        document.getElementById('ifAbove').style.display = 'block';
        document.getElementById('ifChecked').style.display = 'block';
    }
    else    {
        document.getElementById('ifAbove').style.display = 'none';
        document.getElementById('ifBelow').style.display = 'none';
        document.getElementById('ifChecked').style.display = 'none';
    }
    }
})(jQuery);

【讨论】：

请您更正代码并在此处分享！我会很感激的。