Frage Wie kann ich divs abgängig von einer Checkbox zeigen/ausblenden lassen?

[Matthias]

Hallo,

bisher habe ich mich vor Javascript immer gedrückt. Doch jetzt komme ich nicht drumrum.

Mein Ziel ist es, dass abhängig davon, ob eine Checkbox geklickt wurde oder nicht, ein anderer div zu sehen ist.

Ich habe mir einige Tutorials angesehen, doch komme nicht weiter.

Das ist mein bisheriger Code:

<input type="checkbox" id="myCheck" onclick="myFunction()" checked />

<p id="text" style="display:none">Checkbox is CHECKED!</p>

<div id="div1">
 
  <p>Text1</p>
 
</div>

<div id="div2">
 
  <p>Text2.</p>
 
</div>


<script>
 
function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");
  // Get the output text
  var text = document.getElementById("div1");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
  
    text.style.display = "none";
  }
}
 
</script>

Vermutlich muss ich bei else den "div2" targetieren und dann irgendwie noch sagen, dass wenn
die Checkbox nicht geklickt wurde, div1 ausgeblendet werden und div2 eingeblendet werden soll.

Meine eigenen Versuche sind bisher fehlgeschlagen.

Wie müsste der Code korrekt/viabel aussehen?

Danke

 

[Aaron3219]

Hier mal der trivialste Ansatz:

#div2 {
  display: none;
}

<input type="checkbox" id="myCheck" onclick="myFunction()" checked />
<p id="text" style="display:none">Checkbox is CHECKED!</p>
<div id="div1">
  <p>Text1</p>
</div>
<div id="div2">
  <p>Text2.</p>
</div>

<script>
  function myFunction() {
    // Get the checkbox
    var checkBox = document.getElementById("myCheck");
    // Get the output text
    var text = document.getElementById("div1");
    var text2 = document.getElementById("div2");

    // If the checkbox is checked, display the output text
    if (checkBox.checked == true){
      text.style.display = "block";
      text2.style.display = "none";
    } else {

      text.style.display = "none";
      text2.style.display = "block";
    }
  }
</script>

Durch CSS wird div2 per default ausgeblendet, sodass im Ausgangszustand nur div1 zu sehen ist.

Sobald man jetzt auf die Checkbox klickt, passiert das gleiche wie bei div1, nur umgekehrt.