Ergebnis 1 bis 4 von 4

Thema: DIV per checkbox ein- und ausblenden

  1. #1
    Neuer Benutzer
    Registriert seit
    14.09.2017
    Beiträge
    2

    DIV per checkbox ein- und ausblenden

    Hallo Community, dies ist mein erster Post also bitte nicht böse sein, falls ich Fehler mache.

    Ich habe auf meiner Website 5 Checkboxen, deren Status ich via localstorage speicher. Nun möchte ich, dass abhängig vom Checkboxstatus DIVs ein- und ausgeblendet werden. Also nach dem der Button "load" gedrückt wurde, soll geschaut werden welche Checkboxen aktiv (=checked) sind und abhängig davon sollen DIVs eingeblendet werden. (Pro checkbox ein DIV).

    Ich hab leider kaum Ahnung von JS :/ und bin daher dankbar für Tipps und Hinweise! Die URL zu meiner Seite ist www.sprts.de

    Html:
    Code:
    <input type="checkbox" value="chB1" /> Checkbox 1<br />
    <input type="checkbox" value="chB2" /> Checkbox 2<br />
    <input type="checkbox" value="chB3" /> Checkbox 3<br />
    <input type="checkbox" value="chB4" /> Checkbox 4<br />
    <input type="checkbox" value="chB5" /> Checkbox 5<br /> 
    <button onclick="save()">SAVE</button>
    
    <button onclick="load_()">LOAD</button>
    Jquery Code zum Speichern:

    PHP-Code:
    var icheckboxes document.querySelectorAll('input[type=checkbox]');

    function 
    save() {
        for (
    0checkboxes.lengthi++) {
            
    localStorage.setItem(checkboxes[i].valuecheckboxes[i].checked); 
        }
    }

    function 
    load_() {
        for (
    0checkboxes.lengthi++) {
            
    checkboxes[i].checked localStorage.getItem(checkboxes[i].value) === 'true' true:false;
        }


  2. #2
    Erfahrener Benutzer
    Registriert seit
    29.10.2014
    Beiträge
    481
    Hat zwar nichts mit jQuery zu tun, aber hier ein Ansatz:

    PHP-Code:
    <div id="chB1">1. Ich bin sichtbar!</div>
    <
    div id="chB2">2. Ich bin sichtbar!</div>
    <
    div id="chB3">3. Ich bin sichtbar!</div>
    <
    div id="chB4">4. Ich bin sichtbar!</div>
    <
    div id="chB5">5. Ich bin sichtbar!</div
    PHP-Code:
      var icheckboxes document.querySelectorAll('input[type=checkbox]'); 

        function 
    save() { 
          for (
    0checkboxes.lengthi++) {
            
    // mit json kodiert, damit der typ nicht von boolean zu string geändert wird 
            
    localStorage.setItem(checkboxes[i].valueJSON.stringifycheckboxes[i].checked ));  
          } 
        } 

        function 
    load_() { 
          for (
    0checkboxes.lengthi++) { 
            
            
    // Wert wieder auslesen und zurück dekodieren
            
    var isChecked JSON.parselocalStorage.getItem(checkboxes[i].value) );
            
    checkboxes[i].checked isChecked
            
            
    // sichtbarkeit abhängig vom checked-Status setzen
            
    var showState isChecked 'block' 'none'
            
    document.getElementById(checkboxes[i].value).style.display showState;
            
          } 
        } 
    i++; // zaehler i um 1 erhoehen

  3. #3
    Neuer Benutzer
    Registriert seit
    14.09.2017
    Beiträge
    2
    Danke für denk Code!

    Wisst ihr zufällig auch, wie ich den Code am besten in Wordpress einbinde?

    Per snippet Plugin klappt das leider nicht, das gibt dann folgende Fehlermeldung zurück: "Das Snippet wurde deaktiviert wegen einem Fehler in der Zeile 1:
    syntax error, unexpected 'var' (T_VAR)"

    Ne idee woran das liegen könnte?

    Beste Grüße und vielen Dank schonmal!

  4. #4
    Erfahrener Benutzer
    Registriert seit
    29.10.2014
    Beiträge
    481
    Neue Frage, neuer Thread. Sowas wirst du aber eher im Wordpress Forum finden.
    i++; // zaehler i um 1 erhoehen

Lesezeichen

Lesezeichen

Berechtigungen

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