[GELÖST] Checkboxen - divs ein-/ausblenden

[BloosyMavis]

Hallo liebe Leute, hab leider ein kleines JS-Problem und ich hoffe mir kann einer helfen.

Ich habe 2 Divs und 2 Checkbox-Buttons (Kurzfassung):

<input type="checkbox" id="box1" onclick="blenden()">box1
<input type="checkbox" id="box2" onclick="blenden()">box2

<div id="div1"> Tabelle1 </div>
<div id="div2"> Tabelle2 </div>

Ich möchte das wenn box1 ausgewählt ist div1 erscheint und bei abwählen wieder verschwindet, genauso box2 mit div2 , zusätzlich möchte ich das wenn beide checkboxen aktiv sind auch beide divs angezeigt werden sollen.

Hier mein Code (im JS-script-tag und beide divs sind in der window.onload - Funktion auf display):

function blenden(){

 if (document.getElementById("box1").checked == true){
  document.getElementById("div1").style.display = "";

 }else if (document.getElementById("box2").checked == true){
  document.getElementById("div2").style.display = "";

 }else if (document.getElementById("box1").checked ==false){
  document.getElementById("div1").style.display = "none";

 }else if (document.getElementById("box2").checked == false){
  document.getElementById("div2").style.display = "none";

}

Leider funktioniert es nicht richtig. Es wird immer nur 1 Div wieder ausgeblendet und beide gleichzeitig zu zeigen Funktioniert auch nicht.

Wo ist mein Denkfehler?
Dankeschön

 

[Dormilich]

Wo ist mein Denkfehler?

beim else if. du hast es so konstruiert, dass immer nur genau eine Bedingung ausgeführt werden kann.

 

[tsseh]

wenn box1 ausgewählt ist, wird der else zweig des 1. if nicht abgearbeitet

 

[BloosyMavis]

oh stimmt :-( , wie mach ich das da am besten?

 

[Stefanus]

Du musst die Bedingungen in zwei IFs aufteilen, dann können box1 und box2 getrennt überprüft werden:

function blenden(){
if (document.getElementById("box1").checked == true) {
  document.getElementById("div1").style.display = "";
}else if (document.getElementById("box1").checked ==false) {
   document.getElementById("div1").style.display = "none";
}

if (document.getElementById("box2").checked == true) {
   document.getElementById("div2").style.display = "";
} else if (document.getElementById("box2").checked == false) {
   document.getElementById("div2").style.display = "none";
}
}

Da du noch nicht so viel Erfahrung mit JS zu haben scheinst, hier noch ein paar Tipps, wie ich den Code verbessern würde.
Am Wichtigsten ist aber, dass der Code für dich leicht lesbar ist, also entscheide selber, mit welchem Coding-Stil du am besten zurecht kommst.

1. Würde ich empfehlen, die Elemente in Variablen zwischenzuspeichern, dadurch wird der Code übersichtlicher:

function blenden(){
  var box1 = document.getElementById("box1");
  var div1 = document.getElementById("div1");
  if (box1.checked == true) {
    div1.style.display = "";
  } else if (box1.checked ==false) {
    div1.style.display = "none";
  }

  var box2 = document.getElementById("box2");
  var div2 = document.getElementById("div2");
  if (box2.checked == true) {
    div2.style.display = "";
  } else if (box2.checked == false) {
    div2.style.display = "none";
  }
}

2. Kannst du "== true" weglassen, weil eine If-Bedingung immer auf true geprüft wird. Außerdem ist das Else-If unnötig - denn checked ist entweder true oder false, ein einfaches "else" reicht also:

function blenden(){
  var box1 = document.getElementById("box1");
  var div1 = document.getElementById("div1");
  if (box1.checked) {
    div1.style.display = "";
  } else {
    div1.style.display = "none";
  }

  var box2 = document.getElementById("box2");
  var div2 = document.getElementById("div2");
  if (box2.checked) {
    div2.style.display = "";
  } else {
    div2.style.display = "none";
  }
}

3. Bietet sich hier der so genannte Ternary-Operator an:
Ziel = (Bedingung) ? Wert_falls_true : Wert_falls_false;
Damit wird aus dem If-Else ein Einzeiler. Das ist aber gewöhnungsbedürftig, also musst du selbst entscheiden, ob du damit klarkommst.

function blenden(){
  var box1 = document.getElementById("box1");
  var div1 = document.getElementById("div1");
  div1.style.display = (box1.checked) ? "" : "none";

  var box2 = document.getElementById("box2");
  var div2 = document.getElementById("div2");
  div2.style.display = (box2.checked) ? "" : "none";
}

Zuletzt noch ein Tipp für den HTML-Code:
Momentan nutzt du onclick="blenden()"
Das funktioniert nur, wenn der Nutzer mit der Maus die Checkbox anklickt - es ist aber auch möglich, über die Leertaste eine Checkbox ein- und auszuschalten.
Daher nutze lieber: onchange="blenden()"
Das funktioniert immer, egal ob man Maus oder Tastatur benutzt.

 

[BloosyMavis]

Herzlichsten Dank für diese wertvollen Tipps!
Habe meinen ganzen Code neue strukturiert und sehe nun um einiges besser durch!

 

[mikdoe]

ist es damit gelöst?

 

[BloosyMavis]

ja danke