dynamischen Ausblenden über selben Auswahlkasten

Question

Ich möchte zwei Textfelder dynamisch einblenden- das klappt auch super. Wenn ich allerdings das Kreuz der Auswahlfrage wieder abwähle, dann verschwinden die Textfragen nicht wieder. Es fehlt also irgendeine Bedingung in Richtung "unchecked" (das gibt es wohl nicht bei JS).

Wie kann ich also den COde verändern, sodass sich die Textfelder ein und ausblenden über das selbe Kästchen:

<script type="text/javascript">

var optionA = document.getElementById("B002_01a");  // 
var optionB = document.getElementById("B002_02a");  // 


var frage  = document.getElementById("B003_qst");  // HTML-ID der Texteingabe
var frage2 = document.getElementById("B004_qst");  // HTML-ID der Texteingabe

 
function toogle() {

  if (optionB.checked ) {

    frage.style.display = "";
    frage2.style.display = "";

  } else {
   
    frage.style.display = "none";
   frage2.style.display = "none"; 
  }


}
 

SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);

 

toogle();

</script>

Comments

Was ist denn B002_01a? In Ihrer toogle()-Funktion fragen Sie nur den Stand von B002_02a ab.

---

B002 ist eine normale Auswahlfrage, mit zwei Items. Die beiden Fragen B003 und B004 sollen nur auftauchen, wenn das zweite Item der Auswahlfrage (B002_02a) markiert wurde. Wenn der Haken entfernt wird, sollen die beiden Fragen wieder verschwinden.

---

Ist es eine Auswahl oder eine Mehrfachauswahl? Denn Häkchen gibt es klassisch nur bei einer Mehrfachauswahl.

Fügen Sie in der Funktion toogle() testweise zu Beginn folgende Zeile ein:

console.log("Check", optionB.checked);

Prüfen Sie anschließend in der Fehlerkonsole des Browsers (s. Anleitung), was angezeigt wird.

---

Es ist eine Auswahl (keine Mehrfachauswahl)- ABER: Ich habe in den Optionen eingestellt, das Kreuze bei einfachen Auswahlfragen durch ein Klick auf das selbige Feld wieder abgewählt werden können. Ich denke da liegt auch das Problem.

console.log("Check", optionB.checked);
Ausgangswerte ist False, wenn ich das Feld auswähle -> True, wenn ich das Feld wieder abwähle -> bleibt bei True

---

> Ich habe in den Optionen eingestellt, das Kreuze bei einfachen Auswahlfragen durch ein Klick auf das selbige Feld wieder abgewählt werden können. Ich denke da liegt auch das Problem.

Ja, das kann durchaus sein. Und zwar deshalb, weil dieses Abwählen mit einer kleinen zeitlichen Verzögerung passiert. Ich muss nochmal in den Code schauen, da sollte ein anderes Event als "click" ausgelööst werden - womöglich funktioniert es mit "change" statt "click".

Sie können es gerne mal ausprobieren, aber wie gesagt: Das muss ich nochmal prüfen.

---

Danke, "change" hat bei mir auch nicht geklappt. Nur als Info, ich arbeite nicht auf dem SoSci Server und auch nicht mit dem allerneusten Update.

Answer 1

Also, es liegt tatsächlich daran, dass die Option "Kreuzchen in einfacher Auswahl oder Skala abwählbar" mit Ihrem "click" Handler in Konkurrenz tritt. Erst wird Ihre Funktion verarbeitet, und danach kümmert sich die Funktion erst darum, das Kreuzchen zu entfernen.

In dem Moment, wo Ihre Funktion prüft, ob die Option markiert ist, ist sie es also noch.

Die Lösung besteht darin, dass Sie Ihre Funktion minimal verzögern. Durch einen Timeout.

Aus diesen beiden Zeilen ...

SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);

... würden Sie folgendes machen:

function toggleDelayed() {
    window.setTimeout(toogle, 10);
}
SoSciTools.attachEvent(optionA, "click", toggleDelayed);
SoSciTools.attachEvent(optionB, "click", toggleDelayed);

Comments

super, danke!