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

Question

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

我正在尝试制作一个有 5 个单选按钮的联系表格，每个单选按钮都有自己的div。div 内部有一个textarea.选中radio button 1时，它显示div，选中radio button 2时，显示div，但隐藏radio button 1中检入的div。

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

我已经知道，当选中单选按钮时，它会显示div，但是当您选择另一个单选按钮时，它不会隐藏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

在解决您的问题时，我可以为您提供的提示是：

样式

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

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

2. 在你的javascript中，你可以在单选按钮中放置一个事件处理程序，然后添加/删除.selected或.notSelected类。 如何使用原版 javascript 添加或删除类。

为了有效地隐藏其余部分而不使用非常冗长的代码，您可以使用同级来引用其他单选按钮并将类 notSelected 添加到其中 如何在原版JavaScript中实现兄弟姐妹

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

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

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.