隱藏輸入字段時複選框被選中，並在localStorage的jQuery的

Question

我試圖使用checkboxes輸入框隱藏，在上input作品localStorage和.hide()保存checkbox名字，但是當我刷新頁面它不會持續要隱藏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> 

複選框

<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

進行本地存儲，你應該使用儲物櫃。

您必須在HTML文件中包含一個js庫，然後才能將數據存儲在本地存儲中，甚至在刷新頁面後也能獲得該數據庫。

下面是一個例子，你如何能夠在本地存儲設定值：

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

你不能對其進行測試，在這裏，因爲計算器不會讓您保存到本地存儲。