Ankündigung

Einklappen
Keine Ankündigung bisher.

Checkboxen die sich gegenseitig ausschließen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Checkboxen die sich gegenseitig ausschließen

    Hallo nur ein kleines Problem, bei dem ich aber noch nicht durchsehe. Ich möchte zwei Checkboxen haben, die sich gegenseitig ausschließen. Wird die eine aktiviert, deaktiviert sich die andere und umgekehrt.
    Ich habe mir den Code zusammen gebaut, der aber leider nur in einer Richtung das Gewünschte zeigt. Wenn 2 aktiviert ist und man auf 1 klickt, funktioniert es so, wie ich es will. Aber ist 1 aktiviert, blockiert es die 2. Wo ist der Fehler?

    <!DOCTYPE html>
    <html>
    <body>

    Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction()" checked="checked">
    Checkbox2: <input type="checkbox" id="myCheck2" onclick="myFunction()">

    <script>
    function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var checkBox2 = document.getElementById("myCheck2");
    if (checkBox.checked == true){
    checkBox2.checked = false;
    }
    if (checkBox2.checked == true){
    checkBox.checked = false;
    }
    }
    </script>

    </body>
    </html>

  • #2
    Du fragst immer beide Boxen in der Reihenfolge ab, in der sie im Code stehen. Sind beide aktiv, springt immer Deine erste If-Abfrage an, welche erkennt, dass die erste Box aktiv ist. In der Folge wird immer die zweite Box deaktiviert – egal, welche zuerst aktiv war.

    Ich würde empfehlen, dem Funktionsaufruf immer this als Parameter zu übergeben. this enthält eine Referenz auf das HTML-Element, von dem aus die Funktion aufgerufen wird. Damit kannst Du also nachvollziehen, was angeklickt wurde. Der passende Code dazu könnte dann etwa so aussehen:

    HTML-Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction(this)" checked="checked">
    Checkbox2: <input type="checkbox" id="myCheck2" onclick="myFunction(this)">
    
    <script>
    function myFunction(element) {
      var checkBox = document.getElementById("myCheck");
      var checkBox2 = document.getElementById("myCheck2");
      if (element.checked == true){
        if (element.id == "myCheck")
          checkBox2.checked = false;
        else
          checkBox.checked = false;
      }
    }
    </script>
    
    </body>
    </html>

    Kommentar


    • #3
      Hey cool. Danke. Funktioniert. Musste nur das 'else' hinter die eine geschweifte Klammer schieben, damit es nach meinen Vorstellungen klappt.
      Besten Dank.

      Kommentar


      • #4
        In diesem Fall könntest du auch einfach einen Radio Button nehmen. Da ist die Verriegelung schon drin und du brauchst kein JavaScript

        Kommentar

        homepage-forum.de - Hilfe für Webmaster! Statistiken

        Einklappen

        Themen: 56.459   Beiträge: 428.482   Mitglieder: 27.877   Aktive Mitglieder: 60
        Willkommen an unser neuestes Mitglied, jorna2a.

        Online-Benutzer

        Einklappen

        637 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 635.

        Mit 2.057 Benutzern waren am 14.07.2019 um 11:45 die meisten Benutzer gleichzeitig online.

        Die neuesten Themen

        Einklappen

        SimpleSite

        Die neuesten Beiträge

        Einklappen

        Lädt...
        X