根据单选按钮选择显示/隐藏输入字段
Posted
技术标签:
【中文标题】根据单选按钮选择显示/隐藏输入字段【英文标题】：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中完美运行
是的，我终于可以做到了。谢谢。
【参考方案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);
【讨论】：
请您更正代码并在此处分享！我会很感激的。以上是关于根据单选按钮选择显示/隐藏输入字段的主要内容，如果未能解决你的问题，请参考以下文章