javascript - 在复选框选中时显示 div 并在未选中时隐藏它(即使在加载时，因为本地存储)

Question

因此，如果选中了复选框，则页面必须显示一个 div，如果未选中，则页面必须隐藏它。但我正在使用本地存储，因此它不应在页面加载时隐藏，而仅在未选中时隐藏。如果可能的话，它应该可用于很多复选框(正好 37 个)。

我的代码:

HTML:

<div id="mob1-div" class="row hide one">Mobilisern1</div>
<div id="mob2-div" class="row hide-div">Mobilisern2</div>

<div id="mob1" class="targetDiv">Mobiliseren 1<input type="checkbox" class="checkbox chk" value="one" data-ptag="mob1-div" store="checkbox1"/></div>
<div id="mob2" class="targetDiv">Mobiliseren 2<input type="checkbox" class="checkbox" data-ptag="mob2-div" store="checkbox2"/></div>

Javascript:

$(function() {
    var boxes = document.querySelectorAll("input[type='checkbox']");
    for (var i = 0; i < boxes.length; i++) {
        var box = boxes[i];
        if (box.hasAttribute("store")) {
            setupBox(box);
        }
    }

    function setupBox(box) {
        var storageId = box.getAttribute("store");
        var oldVal    = localStorage.getItem(storageId);
        console.log(oldVal);
        box.checked = oldVal === "true" ? true : false;

        box.addEventListener("change", function() {
            localStorage.setItem(storageId, this.checked); 
        });
    }
});
$(function(){
$(".chk").on('change',function(){
var self=$(this);
    var aData= self.attr("value");
    $("."+aData).toggleClass('hide')
});
});

此代码的问题在于，当您选中该框时，div 显示，但如果您重新加载页面，该框仍会被选中。不过，div 不再可见。

Answer 1

您的问题似乎集中在您的第二个复选框没有指定 value 属性(所有复选框都需要具有该属性才能有意义)这一事实。

我对您的代码进行了一些调整，使其更加有效和紧凑(将 store 替换为 data-store，使用三元运算符而不是 if/then，将两个 document.ready 函数合并为一个，并将 for 循环更改为 forEach)。这些更改不是问题的一部分，但它们确实允许您的代码更加简短，这有助于故障排除。

localStorage 在 Stack Overflow 代码片段中不起作用，但可以在 this Fiddle 中看到工作版本。 。