ausblenden Eingabefeld, wenn Checkbox aktiviert ist und in localstorage jQuery

Question

Ich versuche, Eingabefelder mit checkboxes, Speichern des checkbox Namen in der localStorage und .hide() auf den input Arbeiten zu verstecken, aber wenn ich die Seite aktualisieren es nicht anhalten das Feld input wird ausgeblendet, und das checkbox muss nicht uncheck sein.

Kann jemand darauf hinweisen, was mir fehlt, weiß ich die Prüfung if() noch nicht abgeschlossen ist, habe ich versucht, einen for() in der if tun, um die localStorage Werte zu erhalten und tun ('#'+forVal).hide() oder ('#' + forVal).prop('checked', false) aber das hat nicht funktioniert.

Die inputs sind dynamisch

searchParams = getObjects(apiPaths[i].get.parameters); 
for (var x = 0; x < searchParams.length; x++) { 
    var container = $('#checkBox'); 
    var inputs = container.find('input'); 
    var id = inputs.length + 1; 
    var inputName = searchParams[x].name; 
    $('<textarea />', { id: inputName, name: inputName, placeholder: inputName, rows: "2", class: "search-area-txt col-sm-12" }).appendTo(searchbox); 
    var chkBoxElement = $('<input />', { type: 'checkbox', id: inputName, name: inputName }).appendTo(checkBox); 
    chkBoxElement.click(function() { 
      checkBoxSetting(this.id); 
    }); 
    chkBoxElement.prop('checked', true); // initially all inputs are checked 

    $('<label />', { 'for': 'x' + id, text: inputName, id: inputName, name: inputName }).appendTo(checkBox); 
} 

Prüft die localStorage für Kontrollkästchen

var inputNames = []; 
if (localStorage.getItem('chked') !== null) { 
    inputNames = JSON.parse(localStorage.getItem('chked')); 
} 

es zum html localStorage

function checkBoxSetting(id) { 
    var indexOfItem = inputNames.indexOf(id) 
    if (indexOfItem >= 0) { 
     inputNames.splice(indexOfItem, 1); 
    } else { 
     inputNames.push(id); 
    } 
    localStorage.setItem('chked', JSON.stringify(inputNames)); 
    $("#" + inputNames).hide(); 
} 

Beispiel Sparen mit der Einsparung an localStorage

Plunker

Html Textfelder

<textarea id="id" name="id" placeholder="id" rows="2" class="search-area-txt col-sm-12"></textarea> 
<textarea id="sku" name="sku" placeholder="sku" rows="2" class="search-area-txt col-sm-12"></textarea> 
<textarea id="code" name="code" placeholder="code" rows="2" class="search-area-txt col-sm-12"></textarea> 

Kästchen zum Ankreuzen

<div id="checkBox"> 
<input type="checkbox" id="id" name="id"> 
<label for="id" id="id" name="id">id</label> 
<input type="checkbox" id="sku" name="sku"> 
<label for="sku" id="sku" name="sku">sku</label> 
<input type="checkbox" id="code" name="code"><label for="code" id="code" name="code">code</label> 
</div> 

Answer 1

für die lokale Speicherung sollten Sie Locker verwenden.

Sie müssen eine js-Bibliothek in Ihre HTML-Datei einfügen, und dann können Sie Ihre Daten im lokalen Speicher speichern, und selbst das wird Ihnen auch nach dem Aktualisieren der Seite möglich sein. Hier

ist ein Beispiel, wie Sie in der Lage sein werden Wert im lokalen Speicher zu setzen:

Lockr.set ("status", "geprüft");

und Sie können Werte zurück, wie folgt:

var users = Lockr.get ('Status');

Hier können Sie locker.js Bibliotheksdatei erhalten:

https://github.com/tsironis/lockr/blob/master/lockr.js

Answer 2

Dies ist ein Anfang einer Lösung. Dies behandelt den lokalen Speicher und aktiviert das Kontrollkästchen, wenn es beim erneuten Laden der Seite aktiviert wurde.

$(document).ready(function() { 
 
    var inputNames = [] 
 

 
    if (localStorage.getItem('chked') !== null) { 
 
    inputNames = JSON.parse(localStorage.getItem('chked')); 
 
    $("#" + inputNames[0]).attr("checked", true) 
 
    $('#name').hide() 
 
    } 
 

 

 
    function checkBoxSetting(name) { 
 
    var indexOfItem = inputNames.indexOf(name) 
 
    if (indexOfItem >= 0) { 
 
     inputNames.splice(indexOfItem, 1); 
 
    } else { 
 
     inputNames.push(name); 
 
    } 
 

 
    localStorage.setItem('chked', JSON.stringify(inputNames)); 
 

 
    $('#name').toggle() 
 
    } 
 
});

<script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 

 
<input type="text" id="name" /> 
 
<input type="checkbox" id="checkBoxName" onclick="checkBoxSetting(this.id)" />

Sie können es hier nicht testen, weil Sie nicht Stackoverflow in den lokalen Speicher speichern lassen.