Ergebnis 1 bis 8 von 8
  1. #1
    BloosyMavis ist offline Jungspund
    registriert
    16-06-2016
    Ort
    Dresden
    Beiträge
    15

    Question Checkboxen - divs ein-/ausblenden

    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):

    HTML-Code:
    <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):

    HTML-Code:
    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
    Geändert von mikdoe (20-06-2016 um 14:11 Uhr) Grund: Code Tags, gelöst

  2. #2
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.306

    AW: Checkboxen - divs ein-/ausblenden

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

  3. #3
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: Checkboxen - divs ein-/ausblenden

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

  4. #4
    BloosyMavis ist offline Jungspund
    registriert
    16-06-2016
    Ort
    Dresden
    Beiträge
    15

    AW: Checkboxen - divs ein-/ausblenden

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

  5. #5
    Stefanus ist offline Mitglied
    registriert
    19-02-2006
    Ort
    Köln
    Beiträge
    29

    AW: Checkboxen - divs ein-/ausblenden

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

    Code:
    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:
    Code:
    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:
    Code:
    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.
    Code:
    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.
    Geändert von Stefanus (16-06-2016 um 17:01 Uhr)
    Wenn man sich vornimmt, den ganzen Tag lang nichts zu erreichen und das dann auch schafft, hat man dann was erreicht oder nicht ?

  6. #6
    BloosyMavis ist offline Jungspund
    registriert
    16-06-2016
    Ort
    Dresden
    Beiträge
    15

    AW: Checkboxen - divs ein-/ausblenden

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

  7. #7
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.822

    AW: Checkboxen - divs ein-/ausblenden

    ist es damit gelöst?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  8. #8
    BloosyMavis ist offline Jungspund
    registriert
    16-06-2016
    Ort
    Dresden
    Beiträge
    15

    AW: Checkboxen - divs ein-/ausblenden

    ja danke

Ähnliche Themen

  1. Divs ausblenden
    Von Diiidiiiii im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 26-07-2012, 22:37
  2. divs ein- und ausblenden
    Von bulgrin im Forum JavaScript
    Antworten: 16
    Letzter Beitrag: 15-07-2010, 12:37
  3. 2 divs gleichzeitig ein- und ausblenden
    Von Seraina81 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 03-12-2008, 18:33
  4. DIVs ein- und ausblenden
    Von piXeLfanatiker im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 13-02-2006, 17:04
  5. Wie kann man divs ein ausblenden?
    Von daniel987 im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 17-10-2004, 19:51

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •