javascript - 选中复选框并在 localStorage jQuery 中隐藏输入字段

Question

我正在尝试使用checkboxes隐藏输入框，将checkbox名称保存在localStorage和.hide()中input 上的 有效，但是当我刷新页面时，它不会保留要隐藏的 input 字段，也不会保留 checkbox 被取消选中。

有人能指出我错过了什么吗，我知道检查 if() 仍然不完整，我尝试在 中执行 for() if 获取 localStorage 值并执行 ('#'+forVal).hide() 或 ('#' + forVal).prop ('checked', false) 但这根本不起作用。

输入是动态的

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

保存到 localStorage 的示例 html

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

这是解决方案的开始。这将处理本地存储并检查复选框(如果在您重新加载页面时已选中该复选框)。

$(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 不允许您保存到本地存储。