[HTML/CSS/JS] Funktionierender Switch

Aus gegebenem Anlass: Sichert eure Backupcodes wenn ihr die Zwei-Faktor-Authentifizierung aktiviert habt!

Infos dazu findet ihr nochmal hier

  • Hi Leute,


    ich möchte einen funktionierenden Switch in HTML hinbekommen, also so was:

    s0.jpgs1.jpg


    die CSS Animation funktioniert super, aber ich weiß leider nicht, wie auch auch hinbekomme, dass am Ende auch etwas passiert (JS-Funktion z.B.), wenn ich diesen Switch drücke.


    Kann mir da einer helfen?


    Mein aktueller HTML-Code:

    Code: HTML
    1. <label class="switch">
    2. <input type="checkbox">
    3. <span class="slider round"></span>
    4. </label>

    und hier CSS:

    Grüße

  • Wenn das in input ckeckbox umgesetzt ist, ist es ganz einfach in Jquery:


    Code
    1. if ($('input.checkbox').is(':checked')) {
    2. //Tu was
    3. }


    Natürlich musst es so abändern

    Code
    1. <label class="switch">
    2. <input class="checkbox" type="checkbox">
    3. <span class="slider round"></span>
    4. </label>

    Wer PALWAL-Sternchen vergibt, bekommt aus Prinzip ein Like 😏


    palwal Donald Trump ist einer der besten Präsidenten welche die USA je hatte, meine Meinung.

  • Irgendwie klappt das beides nicht.


    Ich hab mal die kleine Datei mit diesen Erkentnissen angehängt.
    toggle.txt


    //edit: Wie man sieht möchte ich, dass auf eine andere HTML-Seite weitergeleitet wird, wenn der Switch betätigt ist.

    Warum möchtest du dann eine Link weiterleitung? Naja egal. Wann möchtest du denn, wann ein benutzer weitergeleitet wird und wann nicht?

    Schau dir mal den JS Code von seegras an und anstatt von console.log fragst du ab: $(this).is(':checked') == true -> dann eben window.location.href = "URL" oder wenn der false ist. Das obliegt dann bei dir.

    MfG
    XonarZ