Question

根据选择哪个单选按钮，我无法让单选按钮向用户显示不同的Div。默认情况下，单选按钮“矩形”处于选中状态，因此矩形容器Div应该可见。但是，如果用户选择“椭圆形”单选按钮，则应隐藏矩形容器，并相应地显示椭圆形容器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>

Answer 2

以下是使用onchange="change('');"

的较短代码

您的代码不起作用，因为您在[0]此处忘记了document.getElementsByClassName('..')[0]

function change(name){
 document.getElementsByClassName('Rectangle-container')[0].style.display = 'none';
  document.getElementsByClassName('Oval-container')[0].style.display = 'none';
  document.getElementsByClassName('Round-container')[0].style.display = 'none';
  document.getElementsByClassName('Oblong-container')[0].style.display = 'none';
document.getElementsByClassName(name)[0].style.display="block";

}

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

<span>
What is the shape of your pool:
<label class="radio-container">
   <input onchange="change('Rectangle-container');" type="radio" name="radio" class="RectangleCheck" checked="checked">
   <span class="radio-checkmark"></span>Rectangle
</label>
<label class="radio-container">
  <input onchange="change('Oval-container');" type="radio" name="radio" class="OvalCheck"><span class="radio-checkmark"></span>Oval
  </label>
<label class="radio-container">
  <input onchange="change('Round-container');" type="radio" name="radio" class="RoundCheck"><span class="radio-checkmark"></span>Round
  </label>
<label class="radio-container">
<input onchange="change('Oblong-container');" 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 3

上述具有完整CSS的解决方案也很棒，但是如果您想继续使用JavaScript，

1。。将document.onload radioButtonSuperFunction() {更改为window.onload = function() {，以了解为什么请参考this link

2。。当您使用document.getElementsByClassName时，它返回一个元素数组，因此您必须从该数组中选择特定元素，因此不能像var ex1 = document.getElementsByClassName('RectangleCheck');那样使用它，因为不是返回特定元素而是元素数组。

要解决此问题，请使用var ex1 = document.getElementsByClassName('RectangleCheck')[0];仅选择第一个匹配的元素（如果您有许多具有相同类名的元素，这将是一个麻烦的解决方案），或者使用document.getElementById通过其ID定位元素。

Answer 4

如下所示更改您的html代码和javascript代码。

1.）html代码

<span>
  What is the shape of your pool:
  <label class="radio-container">
    <input type="radio" name="radio" class="RectangleCheck" checked="checked" onclick="javascript:radioFunction1();">
    <span class="radio-checkmark"></span>Rectangle
  </label>

  <label class="radio-container">
    <input type="radio" name="radio" class="OvalCheck" onclick="javascript:radioFunction2();">
    <span class="radio-checkmark"></span>Oval
  </label>

  <label class="radio-container">
    <input type="radio" name="radio" class="RoundCheck" onclick="javascript:radioFunction3();">
    <span class="radio-checkmark"></span>Round
  </label>

  <label class="radio-container">
    <input type="radio" name="radio" class="OblongCheck" onclick="javascript:radioFunction4();">
    <span class="radio-checkmark"></span>Custom Oblong</label>
</span>

<div id="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 id="Oval-container" style="display:none">
  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 id="Round-container" style="display:none">
  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 id="Oblong-container" style="display:none">
  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>

2.）javascript代码

var PoolShape = "";

function radioFunction1() {

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

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

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

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

根据在JavaScript HTML和CSS中选中了哪个单选按钮，显示特定的div

4 个答案: