选中单选按钮时显示 div，并隐藏所有其他 div？

Question

我是新来的，如有任何帮助，我们将不胜感激。

我正在尝试创建一个包含 5 个单选按钮的联系表单，每个单选按钮都有自己的 div。在 div 里面有一个 textarea。选中radio button 1时显示div，选中radio button 2时显示div，但隐藏[=15=中选中的div ].

选中的单选按钮不必按顺序排列，它们只需要隐藏其他 div 并显示当前单选按钮 [=43= 中控制的 div ]ed.

我已经把它掌握在单个按钮时，它显示了div，但是当您select另一个无线电按钮时，它不会隐藏div当您选中单选按钮时，所有 div 仍会显示）。

代码下方：

    function radioCheck(radio) {
    data = radio.getAttribute("data")
    switch (data) {
    case '1':
    document.getElementById('ifRadio'+data).style.display = 'block';
    break;
    case '2':
    document.getElementById('ifRadio'+data).style.display = 'block';
    break;
    case '3':
    document.getElementById('ifRadio'+data).style.display = 'block';
    break;
    case '4':
    document.getElementById('ifRadio'+data).style.display = 'block';
    break;
    case '5':
    document.getElementById('ifRadio'+data).style.display = 'block';
    break;
    default:
    document.getElementById('ifRadio1').style.display = 'none';
    
    }
    }

    <!--Radio buttons-->
    <div class="col-md-6">  
    <label class="radio-inline">1
    <input type="radio" onclick="javascript:radioCheck(this);" data=1 name="fid_7" id="showCheck1"></label>
    
    <label class="radio-inline">2
    <input type="radio" onclick="javascript:radioCheck(this);" data=2 name="fid_7" id="showCheck2"></label>
    
    <label class="radio-inline">3
    <input type="radio" onclick="javascript:radioCheck(this);" data=3 name="fid_7" id="showCheck3"></label>
    
    <label class="radio-inline">4
    <input type="radio" onclick="javascript:radioCheck(this);" data=4 name="fid_7" id="showCheck4"></label>
    
    <label class="radio-inline">5
    <input type="radio" onclick="javascript:radioCheck(this);" data=5 name="fid_7" id="showCheck5"></label>
    </div>
    
    <!--If radio 1-->
     <div id="ifRadio1" style="display:none">
    Why did you rate us that way? <br><textarea type="text" id='Radio1' name='yes'></textarea><br>
    What’s not working well?<br> <textarea class="form-control" type="text"></textarea>
     </div>
        
    
    <!--If radio 2-->
     <div id="ifRadio2" style="display:none">
    Why did you rate us that way? <br><textarea class="form-control" type="text" id='Radio2' name='yes'></textarea><br>
    What’s not working well?<br> <textarea class="form-control" type="text"></textarea>
     </div>
              
          
    <!--If radio 3-->     
     <div id="ifRadio3" style="display:none">
    Why did you rate us that way? <br><textarea class="form-control" type="text" id='Radio3' name='yes'></textarea><br>
    How better can we suit your needs? <br><textarea class="form-control" type="text"></textarea>
     </div>        
     
    <!--If radio 4-->     
     <div id="ifRadio4" style="display:none">
    Why did you rate us that way? <br><textarea class="form-control" type="text" id='ifRadio4' name='yes'></textarea><br>
    Do our timing works for you? <br><textarea class="form-control" type="text"></textarea>
     </div>
        
     <!--If radio 5-->     
     <div id="ifRadio5" style="display:none">
    Why did you rate us that way? <br><textarea class="form-control" type="text" id='ifRadio4' name='yes'></textarea><br>
    Do our timing works for you? <br><textarea class="form-control" type="text"></textarea>
     </div>

Answer 1

Stylz，我不知道这是不是你的意思，但我找到的解决方案是这样的：

function display() {
  var div0classes = document.getElementById("radio0div").classList;
  var div1classes = document.getElementById("radio1div").classList;
  var div2classes = document.getElementById("radio2div").classList;

  if (document.getElementById('radio0').checked) {
    div1classes.add("hidden");
    div2classes.add("hidden");

  } else if (document.getElementById('radio1').checked) {
    div0classes.add("hidden");
    div2classes.add("hidden");

  } else if (document.getElementById('radio2').checked) {
    div0classes.add("hidden");
    div1classes.add("hidden");

  }
}

<form>
  <input type="radio" name="radio" id="radio0" value="radio0">radio0<br>
  <div id="radio0div">
    u can see me yay.
  </div>

  <input type="radio" name="radio1" id="radio1" value="radio1">radio1<br>
  <div id="radio1div">
    u can see me yay.
  </div>

  <input type="radio" name="radio2" id="radio2" value="radio2">radio2<br><br>
  <div id="radio2div">
    u can see me yay.
  </div>

  <button type="button" onclick="display()"> 
    Submit 
</button> And this is the script I used to check if a radio is checked.

Answer 2

在此项目上使用您当前的编码风格，包括数据属性、内联 onclick 时尚事件等，以便您可以了解此可能的修复与您现有代码和问题的密切关系。

首先，您必须有一种方法来记住哪个 div 是“打开的”，或者只是像下面演示的那样：在显示相关的之前将它们全部隐藏。它发生得如此之快，以至于没有明显的区别。

function radioCheck(radio) {
    data = radio.getAttribute("data")
    
    // Hide all divs
    
    for (var i = 0; i < 5; i++) { // assuming your data attr 1,2,3,..,N
        var el = 'ifRadio' + (i + 1); // ifRadio1, ifRadio2, etc
        document.getElementById(el).style.display = "none";
    }
    
    // Show the current div
    
    var el = 'ifRadio' + (data); // ifRadio1, ifRadio2, etc
    document.getElementById(el).style.display = "block";
}

<div class="col-md-6">  
<label class="radio-inline">1
<input type="radio" onclick="javascript:radioCheck(this);" data=1 name="fid_7" id="showCheck1"></label>

<label class="radio-inline">2
<input type="radio" onclick="javascript:radioCheck(this);" data=2 name="fid_7" id="showCheck2"></label>

<label class="radio-inline">3
<input type="radio" onclick="javascript:radioCheck(this);" data=3 name="fid_7" id="showCheck3"></label>

<label class="radio-inline">4
<input type="radio" onclick="javascript:radioCheck(this);" data=4 name="fid_7" id="showCheck4"></label>

<label class="radio-inline">5
<input type="radio" onclick="javascript:radioCheck(this);" data=5 name="fid_7" id="showCheck5"></label>
</div>

<!--If radio 1-->
 <div id="ifRadio1" style="display:none">
Why did you rate us that way? <br><textarea type="text" id='Radio1' name='yes'></textarea><br>
What’s not working well?<br> <textarea class="form-control" type="text"></textarea>
 </div>
    

<!--If radio 2-->
 <div id="ifRadio2" style="display:none">
Why did you rate us that way? <br><textarea class="form-control" type="text" id='Radio2' name='yes'></textarea><br>
What’s not working well?<br> <textarea class="form-control" type="text"></textarea>
 </div>
          
      
<!--If radio 3-->     
 <div id="ifRadio3" style="display:none">
Why did you rate us that way? <br><textarea class="form-control" type="text" id='Radio3' name='yes'></textarea><br>
How better can we suit your needs? <br><textarea class="form-control" type="text"></textarea>
 </div>        
 
<!--If radio 4-->     
 <div id="ifRadio4" style="display:none">
Why did you rate us that way? <br><textarea class="form-control" type="text" id='ifRadio4' name='yes'></textarea><br>
Do our timing works for you? <br><textarea class="form-control" type="text"></textarea>
 </div>
    
 <!--If radio 5-->     
 <div id="ifRadio5" style="display:none">
Why did you rate us that way? <br><textarea class="form-control" type="text" id='ifRadio4' name='yes'></textarea><br>
Do our timing works for you? <br><textarea class="form-control" type="text"></textarea>
 </div>

由于您的数据属性都是连续的（没有跳过），您可以使用一个简单的循环来隐藏它们，请参阅我在此处包含的代码中的注释。我将元素名称存储到 el 只是为了提高可读性。

Answer 3

我可以给你的解决问题的技巧是：

样式应该在样式 sheet 中，因为在动态设置样式时只添加或删除 class 会很有效。在你的风格中 sheet 你可以有这个， chosen 指的是点击的单选按钮的文本，而 notChosen 用于隐藏其他单选按钮的文本

.chosen { display: initial; }
.notChosen { display: none; }

并且在您的 javascript 中，您可以在单选按钮和 add/remove .chosen 或 .notChosen class 中放置一个事件处理程序。

为了有效地隐藏其余部分而无需非常冗长的代码，您可以使用兄弟来引用其他单选按钮并向它们添加 class notChosen

我建议你尝试学习 jQuery 因为它会更轻松地解决你的问题和未来的问题。要在 jQuery 中添加或删除 classes 你只需要使用 toggleClass() 要使用 jQuery 引用除单击按钮之外的其他单选按钮，您只需要使用 siblings()

选中单选按钮时显示 div，并隐藏所有其他 div？

Show div when radio button is checked, and hide all the other divs?

html

javascript

css

radio-button