Question

我在这里很新，不胜感激。

我正在尝试制作一个包含5个单选按钮的联系表单，每个单选按钮都有自己的[{'country': 'Argentina', 'rank': 1, 'populations': '1400'}, {'country': 'Brazil', 'rank': 2, 'populations': '900'}, {'country': 'France', 'rank': 3, 'populations': '100'}]。在div内部有一个div。选中textarea时显示radio button 1，选中div时显示radio button 2，但隐藏{{1}中选中的div }。

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

就选中单选按钮而言，它显示了div，但是当您选择另一个单选按钮时，它并没有隐藏div（所有{{1}当您选中单选按钮时，}仍会显示。

代码下方：

div

div

Answer 1

我可以为您解决问题的提示是：

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

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

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

要有效地隐藏其余部分而无需花费很长的代码，您可以使用同级项来引用其他单选按钮，并向其添加notChosen类 How to implement siblings in vanilla javascript

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

Answer 2

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 3

在此项目上使用当前的编码风格以及数据属性，内联onclick方式的事件等，以便您可以看到此可能的修复程序如何与您现有的代码紧密相关并提出疑问。

首先，您必须有一种方法来记住哪个div是“打开的”，或者简单地如下所示：在显示相关的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只是为了增强可读性。

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

3 个答案: