скрыть поле ввода, когда флажок установлен и в LocalStorage JQuery

Question

Я пытаюсь скрыть поля ввода с помощью checkboxes, Сохранение имени checkbox в localStorage и .hide() на input работ, однако при обновлении страницы не сохраняется input поле должно быть скрыто, а не checkbox должно быть uncheck.

Может кто-то указать на то, что я не хватает, я знаю, что проверка if() еще не завершен, я пытался делать for() внутри if, чтобы получить localStorage значения и делать ('#'+forVal).hide() или ('#' + forVal).prop('checked', false), но это не работает.

inputs являются динамическими

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); 
} 

Проверяется localStorage для флажков

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

Сохранение его в 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(); 
} 

Пример HTML с сохранением в localStorage

Plunker

Html текстовые поля

<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> 

Checkbox

<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

для локального хранения следует использовать Locker.

Вам нужно будет добавить одну js-библиотеку в свой HTML-файл, а затем вы сможете хранить свои данные в локальном хранилище, и даже сможете получить это, даже после обновления страницы.

Вот пример того, как вы будете иметь возможность установить значение в локальном хранилище:

Lockr.set («статус», «проверено»);

и вы можете получить значения обратно следующим образом:

Var пользователей = Lockr.get ('статус');

Здесь вы можете получить locker.js файл библиотеки:

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

Answer 2

Это начало решения. Это обрабатывает локальное хранилище и проверяет флажок, если он был проверен при перезагрузке страницы.

$(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)" />

Вы не можете проверить его здесь, потому что StackOverflow не позволит вам сохранить на локальном хранилище.