基于单选按钮选择的显示/隐藏输入字段
基于单选按钮选择的显示/隐藏输入字段
提问于 2021-07-25 21:39:29
我是JS和学习方面的新手。请帮我改正密码。
这些投入是：
- radio-button-1；radio-button-2;
- input-fields-set-1；输入-字段-set-2；input-field-submit.
我想要实现的是：
页面上只显示单选按钮-1和单选按钮-2.单击单选按钮-1输入字段-1和输入字段-提交将显示，但单击单选按钮-2输入-字段-2和输入-字段提交将显示。
完整的代码如下所示。在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>
回答 1
Stack Overflow用户
发布于 2021-07-25 22:03:54
当我在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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68522711
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号