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

Question

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

我正在尝试制作一个包含 5 个单选按钮的联系表单，每个单选按钮都有自己的div。在 div 里面有一个textarea。勾选radio button 1时显示div，勾选radio button 2时显示div，但隐藏div签入radio button 1。

选中的单选按钮不必按顺序排列，它们只需隐藏其他divs 并显示在当前选中的单选按钮中控制的div。

只要选中单选按钮，它就会显示div，但当您选择另一个单选按钮时它不会隐藏div（当您选择其他单选按钮时，所有divs 仍然显示检查单选按钮）。

代码下方：

    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

在解决您的问题时，我可以给您的建议是：

1. 样式应该在样式表中，因为在动态样式时只添加或删除类会很有效。 在您的样式表中，您可以有这个，选择指的是单击的单选按钮的文本，而 notChosen 用于隐藏其他单选按钮的文本

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

1. 在您的 javascript 中，您可以在单选按钮中放置一个事件处理程序并添加/删除 .chosen 或 .notChosen 类。 How to add or remove classes using vanilla javascript.

要有效地隐藏其余部分而不需要很长的代码，您可以使用兄弟姐妹来引用其他单选按钮并将类 notChosen 添加到它们 How to implement siblings in vanilla javascript

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

Answer 3

在此项目中使用您当前的编码风格以及数据属性、内联 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> 

由于您的数据属性都是顺序的（不跳过），您可以使用一个简单的循环将它们全部隐藏，请参阅我在其中包含的代码中的 cmets。我将元素名称存储到el 只是为了提高可读性。