javascript - 根据用户单选输入有条件地显示表单字段
问题描述
我有一个小问题,因为我是 JS 的初学者。我有 4 个条目。将为每个打开另一个条目。在 a 和 b 处,它有效。我的意思是,如果我有 2 个输入,我知道该怎么做。当我打开 aQuestion 条目时,它会打开。在 b 处也是一样的。问题在于 c 和 d,即如果我有超过 2 个输入。我试过了,但它不起作用......
非常感谢!
function displayQuestion(answer) {
document.getElementById(answer + 'Question').style.display = "block";
if (answer == "a") { // hide the div that is not selected
document.getElementById('bQuestion').style.display = "none";
}
if (answer == "b") {
document.getElementById('aQuestion').style.display = "none";
}
if (answer == "c") {
document.getElementById('dQuestion').style.display = "none";
}
if (answer == "d") {
document.getElementById('cQuestion').style.display = "none";
}
}
<div style="text-align: left;">
<h2>Tip taxa*</h2><br><br>
<!--Below is html code. -->
<label>
<!--First input A -->
<input class="radioo" type="radio" id="a" name="yesOrNo" required="" value="a" onchange="displayQuestion(this.value)" />A</label>
<label><br>
<!--Second input B-->
<input class="radioo" type="radio" id="b" name="yesOrNo" required="" value="b" onchange="displayQuestion(this.value)" />B</label><br>
<!--3 input C -->
<input class="radioo" type="radio" id="c" name="yesOrNo" required="" value="c" onchange="displayQuestion(this.value)" />C</label><br>
<!--4 input D-->
<input class="radioo" type="radio" id="d" name="yesOrNo" required="" value="d" onchange="displayQuestion(this.value)" />D</label><br>
</div>
<!--A new one will open for each of the above inputs-->
<!--For a opne aQuestion -->
<div id="aQuestion" style="display:none;"><br/>
<input type="text" id="suma" name="suma" value="2.00" readonly="">
</div>
<!--For b opne bQuestion -->
<div id="bQuestion" style="display:none;"><br/>
<input type="text" id="suma" name="suma" value="20.00" readonly="">
</div>
<!--For c opne cQuestion -->
<div id="cQuestion" style="display:none;"><br/>
<input type="text" id="suma" name="suma" value="200.00" readonly="">
</div>
<!--For d opne dQuestion -->
<div id="dQuestion" style="display:none;"><br/>
<input type="text" id="suma" name="suma" value="2000.00" readonly="">
</div>
解决方案
您错过了 C 和 D 上的开始标签
顺便说一句,你不应该有多个相同的 id。ID应该保持唯一。:)
function displayQuestion(answer) {
document.getElementById(answer + 'Question').style.display = "block";
if (answer == "a") { // hide the div that is not selected
document.getElementById('bQuestion').style.display = "none";
}
if (answer == "b") {
document.getElementById('aQuestion').style.display = "none";
}
if (answer == "c") {
document.getElementById('dQuestion').style.display = "none";
}
if (answer == "d") {
document.getElementById('cQuestion').style.display = "none";
}
}
<div style="text-align: left;">
<h2>Tip taxa*</h2><br><br>
<!--Below is html code. -->
<label>
<!--First input A -->
<input class="radioo" type="radio" id="a" name="yesOrNo" required="" value="a" onchange="displayQuestion(this.value)" />A</label>
<label><br>
<!--Second input B-->
<input class="radioo" type="radio" id="b" name="yesOrNo" required="" value="b" onchange="displayQuestion(this.value)" />B</label><br>
<!--3 input C -->
<label>
<input class="radioo" type="radio" id="c" name="yesOrNo" required="" value="c" onchange="displayQuestion(this.value)" />C</label><br>
<!--4 input D-->
<label>
<input class="radioo" type="radio" id="d" name="yesOrNo" required="" value="d" onchange="displayQuestion(this.value)" />D</label><br>
</div>
<!--A new one will open for each of the above inputs-->
<!--For a opne aQuestion -->
<div id="aQuestion" style="display:none;"><br/>
<input type="text" id="suma" name="suma" value="2.00" readonly="">
</div>
<!--For b opne bQuestion -->
<div id="bQuestion" style="display:none;"><br/>
<input type="text" id="suma" name="suma" value="20.00" readonly="">
</div>
<!--For c opne cQuestion -->
<div id="cQuestion" style="display:none;"><br/>
<input type="text" id="suma" name="suma" value="200.00" readonly="">
</div>
<!--For d opne dQuestion -->
<div id="dQuestion" style="display:none;"><br/>
<input type="text" id="suma" name="suma" value="2000.00" readonly="">
</div>
推荐阅读
- node.js - 删除节点:
码头工人形象 - r - 计算航班中目的地的平均延误
- rust - 指定 HTTP 请求时间的变量生命周期
- wildfly - Quarkus 1.2.1 对 AJP 文件读取/包含(Ghostcat 漏洞)安全吗?
- java - Spring 核心应用程序显示“java.lang.NoClassDefFoundError: org/springframework/core/KotlinDetector”
- neural-network - 使用 VGG16 架构的维度问题
- reactjs - 如何在 react-day-picker DayPickerInput 中添加图标
- java - spring boot 应用运行失败,报错不明确
- javascript - JavaScript中的正则表达式lookbhind
- mysql - 从表的每一列中获取所有不同的行及其计数