我正在为订单创建单选按钮选择列表。每个问题都有一个答案，其中包含一个带有附加信息的 div。我将它们全部设置为在单击单选按钮时显示 div，但是当您转到下一个问题并单击一个选项时，它会隐藏上面的答案并取消选择上一个问题的单选按钮。
编辑澄清:只有一个单选按钮选项应该为每个问题显示附加信息框。因此，如果您对问题 1 单击"is"，您会看到一个信息框。如果您在问题 1 上单击否，则没有信息框。
我希望之前的单选按钮保持选中状态。我从这段代码开始并将其修改为有多个问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<div id="tabs">
<div id="nav">
<p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" /></p>
<p>Show Div 2:<input type="radio" name="tab" value="pkfrom" class="div2" /></p>
</div>
<div id="div1" class="tab">
<p>this is div 1</p>
</div>
<div id="div2" class="tab">
<p>this is div 2</p>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>
这是 jsfiddle:https://jsfiddle.net/lenniejane/d58phaua/
最佳答案
首先你需要给单选按钮加上不同的名字，我也在html中做了一些改动:
<div id="tabs">
<div class="nav">
<p><strong>QUESTION 1</strong></p>
<div class="answers">
<p><input name="tab" type="radio" value="residential-yes">Yes</p>
<p><input name="tab" type="radio" value="residential-no">No</p>
</div>
<div class="tab" id="div1">
<p class="fee-notice">ADDITIONAL INFO 1</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 2</strong></p>
<div class="answers">
<p><input name="tab2" type="radio" value="lift-yes">Yes</p>
<p><input name="tab2" type="radio" value="lift-no">No</p>
</div>
<div class="tab" id="div2">
<p class="fee-notice">ADDITIONAL INFO 2</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 3</strong></p>
<div class="answers">
<p><input name="tab3" type="radio" value="inside-yes">Yes</p>
<p><input name="tab3" type="radio" value="inside-no">No</p>
</div>
<div class="tab" id="div3">
<p class="fee-notice">ADDITIONAL INFO 3</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 4</strong></p>
<div class="answers">
<p><input name="tab4" type="radio" value="inside-yes">Yes</p>
<p><input name="tab4" type="radio" value="inside-no">No</p>
</div>
<div class="tab" id="div4">
<p class="fee-notice">ADDITIONAL INFO 4</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
</div>
样式:
.tab {
display: none;
}
.nav.showtab .tab{
display:block;
}
而 js 会是这样的:
var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');
for(i=0; i<inputsEle.length; i++){
inputsEle[i].addEventListener("change", function(e){
var thiisNav = e.target.parentElement.parentElement.parentElement;
diplayNewTab(thiisNav)
});
}
function diplayNewTab(thiisNav){
for(i=0; i<navEle.length; i++){
navEle[i].classList.remove("showtab");
}
thiisNav.className += ' showtab';
}
https://jsfiddle.net/d58phaua/2/
更新:
如果您在回答另一个问题时需要保持以前问题的“附加信息”可见，请使用此 js:
var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');
for(i=0; i<inputsEle.length; i++){
inputsEle[i].addEventListener("change", function(e){
var thiisNav = e.target.parentElement.parentElement.parentElement;
thiisNav.className += ' showtab';
});
}
关于javascript - 选择单选按钮时显示一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37472062/