根据 JavaScript HTML 和 CSS 中选中的单选按钮显示特定的 div

Question

我无法让我的单选按钮根据选择的单选按钮向用户呈现不同的 Div。默认情况下，单选按钮“矩形”被选中，因此矩形容器 Div 应该是可见的。但是，如果用户选择“椭圆”单选按钮，则应该隐藏 Rectangle-container，并相应地显示 Oval-container Div。

document.onload radioButtonSuperFunction() {
  var PoolShape = "";
  var ex1 = document.getElementsByClassName('RectangleCheck');
  var ex2 = document.getElementsByClassName('OvalCheck');
  var ex3 = document.getElementsByClassName('RoundCheck');
  var ex4 = document.getElementsByClassName('OblongCheck');

  ex1.onclick = radioFunction1;
  ex2.onclick = radioFunction2;
  ex3.onclick = radioFunction3;
  ex4.onclick = radioFunction4;
}

function radioFunction1() {
  document.getElementsByClassName('Rectangle-container').style.display = 'block';
  document.getElementsByClassName('Oval-container').style.display = 'none';
  document.getElementsByClassName('Round-container').style.display = 'none';
  document.getElementsByClassName('Oblong-container').style.display = 'none';
  PoolShape == "Rectangle";
}

function radioFunction2() {
  document.getElementsByClassName('Rectangle-container').style.display = 'none';
  document.getElementsByClassName('Oval-container').style.display = 'block';
  document.getElementsByClassName('Round-container').style.display = 'none';
  document.getElementsByClassName('Oblong-container').style.display = 'none';
  PoolShape == "Oval";
}

function radioFunction3() {
  document.getElementsByClassName('Rectangle-container').style.display = 'none';
  document.getElementsByClassName('Oval-container').style.display = 'none';
  document.getElementsByClassName('Round-container').style.display = 'block';
  document.getElementsByClassName('Oblong-container').style.display = 'none';
  PoolShape == "Round";
}

function radioFunction4() {
  document.getElementsByClassName('Rectangle-container').style.display = 'none';
  document.getElementsByClassName('Oval-container').style.display = 'none';
  document.getElementsByClassName('Round-container').style.display = 'none';
  document.getElementsByClassName('Oblong-container').style.display = 'block';
  PoolShape == "Oblong";
}

.Oval-container,
.Round-container,
.Oblong-container {
  display:none;
}

<span>
  What is the shape of your pool:
  <label class="radio-container">
    <input type="radio" name="radio" class="RectangleCheck" checked="checked">
    <span class="radio-checkmark"></span>Rectangle
  </label>
  
  <label class="radio-container">
    <input type="radio" name="radio" class="OvalCheck">
    <span class="radio-checkmark"></span>Oval
  </label>
  
  <label class="radio-container">
    <input type="radio" name="radio" class="RoundCheck">
    <span class="radio-checkmark"></span>Round
  </label>
  
  <label class="radio-container">
    <input type="radio" name="radio" class="OblongCheck">
    <span class="radio-checkmark"></span>Custom Oblong</label>
</span>



<div class="Rectangle-container">
  Length of your pool in feet
  <input type="number" class="tabinput Length" min="1">

  Width of your pool in feet
  <input type="number" class="tabinput Width" min="1">

  Depth of your pool in feet
  <input type="number" class="tabinput Depth" min="1">
</div>

<div class="Oval-container">
  Half the length of your pool in feet
  <input type="number" class="tabinput HalfLength" min="1">

  Half the width of your pool in feet
  <input type="number" class="tabinput HalfWidth" min="1">

  Depth of your pool in feet
  <input type="number" class="tabinput OvalDepth" min="1">
</div>

<div class="Round-container">
  Radius of your pool in feet
  <input type="number" class="tabinput RoundRadius" min="1">

  Depth of your pool in feet
  <input type="number" class="tabinput RoundDepth" min="1">
</div>

<div class="Oblong-container">
  Small diameter of your pool in feet
  <input type="number" class="tabinput SmallDiameter" min="1">

  Large diameter of your pool in feet
  <input type="number" class="tabinput LargeDiameter" min="1">

  Length of your pool in feet
  <input type="number" class="tabinput OblongLength" min="1">
</div>

任何人都可以推荐一个修复程序以使其正常工作吗？将不胜感激！

Answer 1

不需要 JS，只需使用 CSS 在选中的单选按钮旁边显示 div。

如下所示更改您的 HTML 并添加 CSS。

[type="radio"]:not(:checked)+span+div {
  display: none;
}

[type="radio"]:not(:checked)+span+div {
  display: none;
}

label.radio-container {
  display: block;
}

<span>
What is the shape of your pool:

<label class="radio-container">
<input type="radio" name="radio" class="RectangleCheck" checked="checked">
<span class="radio-checkmark"></span>Rectangle
<div class="Rectangle-container">
  Length of your pool in feet
  <input type="number" class="tabinput Length" min="1"> Width of your pool in feet
  <input type="number" class="tabinput Width" min="1"> Depth of your pool in feet
  <input type="number" class="tabinput Depth" min="1">
</div>
</label>



<label class="radio-container">
<input type="radio" name="radio" class="OvalCheck"><span class="radio-checkmark"></span>Oval
<div class="Oval-container">
  Half the length of your pool in feet
  <input type="number" class="tabinput HalfLength" min="1"> Half the width of your pool in feet
  <input type="number" class="tabinput HalfWidth" min="1"> Depth of your pool in feet
  <input type="number" class="tabinput OvalDepth" min="1">
</div>
</label>




<label class="radio-container">
  <input type="radio" name="radio" class="RoundCheck">
  <span class="radio-checkmark"></span>Round
  <div class="Round-container">
  Radius of your pool in feet
  <input type="number" class="tabinput RoundRadius" min="1"> Depth of your pool in feet
  <input type="number" class="tabinput RoundDepth" min="1">
</div>
</label>



<label class="radio-container">
  <input type="radio" name="radio" class="OblongCheck">
  <span class="radio-checkmark"></span>Custom Oblong
  
  <div class="Oblong-container">
  Small diameter of your pool in feet
  <input type="number" class="tabinput SmallDiameter" min="1"> Large diameter of your pool in feet
  <input type="number" class="tabinput LargeDiameter" min="1"> Length of your pool in feet
  <input type="number" class="tabinput OblongLength" min="1">
  </div>
 </label>

</span>