根据用户单选输入有条件地显示表单字段

Question

我有一个小问题，因为我是 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>

Answer 1

不是每个选项都有 4 个输入字段来显示答案，而是保留一个输入并根据选择将答案设置为该输入字段。如下。

function displayQuestion(answer) { 

  document.getElementById('answer').value = answer;
  document.getElementById('aQuestion').style.display='block';

}

<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="2.00" onchange="displayQuestion(this.value)" />A</label>
  <label><br>
  	<!--Second input B-->
    <input class="radioo" type="radio" id="b" name="yesOrNo" required="" value="20.00" onchange="displayQuestion(this.value)" />B</label><br>
<!--3 input C -->
    <input class="radioo" type="radio" id="c" name="yesOrNo" required="" value="200.00" onchange="displayQuestion(this.value)" />C</label><br>
<!--4 input D-->
    <input class="radioo" type="radio" id="d" name="yesOrNo" required="" value="2000.00" onchange="displayQuestion(this.value)" />D</label><br>
   


</div>


  <div id="aQuestion" style="display:none;"><br/>
    <input type="text" id="answer" name="suma" readonly="true">
  </div>

 </div>

Answer 2

您错过了 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>