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.414   Beiträge: 428.247   Mitglieder: 27.803   Aktive Mitglieder: 72
        Willkommen an unser neuestes Mitglied, qieb111.

        Online-Benutzer

        Einklappen

        595 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 591.

        Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

        Die neuesten Themen

        Einklappen

        • Rauch17
          Antwort auf Fliesen im Wohnzimmer
          Fliesen im Wohnzimmer ist nicht so gute Idee. Ich empfehle nur Holzfußboden, besonders wenn man im Sommer barfuß gerne läuft....
          Gestern, 19:07
        • Rauch17
          Antwort auf Geschenk fur Chefin?
          Letztes Mal habe ich meiner Chefin eine Orchidee mit Lindt Schokolade geschenkt. Sie war sehr froh.
          Gestern, 19:05
        • Rehnat
          Antwort auf Geschenk fur Chefin?
          Sind ja wirklich so einige gute Ideen zusammengekommen, hoffe, sie haben dir dann auch helfen können?
          Aber, ich finde, dass deine Idee auch toll war... Kann mich meinem Vorschreiber auf jeden Fall anschließen, denn ich finde auch, das es nicht immer so einfach ist ein passendes Geschenk zu finden....
          Gestern, 12:48
        • Mr.Kennedy
          Antwort auf Webseite Domain Namen ändern?
          Sehr hilfreich. Ich konnte meine Domain zu kennedy-translations.com ändern. Danke
          Gestern, 12:32
        • Localfu
          Antwort auf Überwachung der Website-Verfügbarkeit
          Hi Peter,
          ich kann das auch kostenlos machen ohne euer kostenpflichtiges Tool und einige Webhoster bieten das kostenlos zum Service an. Zudem sind die Ausfalzeiten extrem selten. Jenachdem welchen Webhoster man hat. CULA.IO wäre für mich keine Alternative und würde bei mir die Kosten unnütz...
          Gestern, 12:16

        Kostenlose Homepage bei Jimdo!

        Einklappen

        Jimdo

        Die neuesten Beiträge

        Einklappen

        Lädt...
        X