Показать галочку check on checkbox и скрыть ее при снятии флажка (даже при загрузке из-за localstorage)

Question

Таким образом, страница должна показывать div, если установлен флажок, и спрятать его, когда он не установлен. Но я использую localstorage, поэтому он не должен скрываться при загрузке страницы, но только когда он не установлен. Если это возможно, оно должно использоваться для большого количества флажков (точно в точности).

Мой код:

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 не работает в фрагментах переполнению стека, но рабочий вариант можно увидеть в this Fiddle.