Anzeigen eines Div bei Auswahl des Optionsfelds

Ich erstelle eine Liste mit Optionsfeldern für ein Bestellformular. Jede der Fragen enthält eine Antwort, die ein div mit zusätzlichen Informationen enthält. Ich habe sie alle eingerichtet, um das Div anzuzeigen, wenn der Radio-Button geklickt wird, aber wenn Sie zur nächsten Frage gehen und auf eine Option klicken, blendet sie die obige Antwort aus und hebt den Radio-Button für die vorherige Frage auf.Anzeigen eines Div bei Auswahl des Optionsfelds

Bearbeiten Zur Klärung: Nur eine der Optionsschaltflächenoptionen sollte die zusätzliche Infobox pro Frage anzeigen. Wenn Sie also Ja zu Frage 1 anklicken, erhalten Sie eine Infobox. Wenn Sie in Frage 1 auf NEIN klicken, gibt es keine Infobox.

Ich möchte, dass die vorherigen Optionsfelder ausgewählt bleiben. Ich begann mit diesem Code und modifiziert es mehrere Fragen haben:

<!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>

Hier ist die jsfiddle: https://jsfiddle.net/lenniejane/d58phaua/

Quelle

2016-05-26 Jen

Ihre Optionsfelder müssen gruppiert werden d nach Name, ruft sie alle "Registerkarte" wird sie alle in der gleichen Gruppe. – Oli

Zuerst setzen müssen verschiedene Namen von Radiobuttons setzen, habe ich auch einige Änderungen in 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>

css:

.tab { 
    display: none; 
} 

.nav.showtab .tab{ 
    display:block; 
}

und js wird wie folgt sein:

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/

UPDATE:

wenn Sie die "zusätzliche Informationen" für frühere Fragen halten sichtbar, wenn eine andere Frage verwenden, beantworten diese 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'; 
    }); 
}

Demo: https://jsfiddle.net/d58phaua/3/

Quelle

2016-05-26 23:18:30

Wie würde ich die "zusätzlichen Informationen" für vorherige Fragen anzeigen, wenn die nächste Frage beantwortet wird? Es bricht immer noch das div zusammen, wenn ich eine Antwort auf die nächste Frage anklicke. – Jen

überprüfen Sie dies: https://jsfiddle.net/d58phaua/3/ –

Tut mir leid, das tut immer noch nicht, was ich brauche. Die zusätzliche Infobox sollte nur angezeigt werden, wenn ein bestimmter Radiobutton angeklickt wird. Wenn sie also in der ersten Frage auf Ja klicken, erhalten sie eine zusätzliche Infobox. Wenn sie bei der ersten Frage Nein anklicken, gibt es keine zusätzliche Infobox. Dies zeigt die zusätzlichen Informationen an, unabhängig davon, auf welche Schaltfläche geklickt wurde. – Jen

https://jsfiddle.net/d58phaua/1/

Hier gehen Sie.

Sie müssen nur verschiedene Namen von Radiobuttons Sie

<input name="tab1" type="radio" value="residential-no">No</p>

Quelle

2016-05-26 22:42:29

Anzeigen eines Div bei Auswahl des Optionsfelds

Antwort

Verwandte Themen