[英]Localstorage of multiple Checkboxes
因此,我有一个模式,用户可以在其中检查一些复选框。 如果选中此复选框,则div应该出现在常规页面上。
我想在本地存储复选框,如果我重新加载页面并选中了一个复选框,则div应该仍然可见。 我已经制作了显示/隐藏div的代码,但是我仍然需要localstorage,但是我真的找不到如何为多个复选框执行此操作。 如何实现本地存储?
HTML:
<div class="container-fluid">
<div id="mob1-div" class="row hide-div">Mobilisern1</div>
<div id="rek1-div" class="row hide-div">rekoefeningen1</div>
<div id="stab1-div" class="row hide-div">stabiliseren1</div>
<div id="ver1-div" class="row hide-div">versterken1</div>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="buttons">
<div class="row"><div class="col-xs-6 text-center"><button class="showMob" target="1">Mobiliseren</button></div>
<div class="col-xs-6"><button class="showVer" target="2">Stabiliseren</button></div></div>
<div class="row"><div class="col-xs-6 text-center"><button class="showStab" target="3">Rekken</button></div>
<div class="col-xs-6"><button class="showRek" target="4">Verserken</button></div>
</div>
<div id="mob1" class="targetDiv">Mobiliseren 1<input type="checkbox" class="checkbox" data-ptag="mob1-div"/></div>
<div id="rek1" class="targetDiv">Rekken 1<input type="checkbox" class="checkbox" data-ptag="rek1-div"/></div>
<div id="stab1" class="targetDiv">Stabilisern 1<input type="checkbox" class="checkbox" data-ptag="stab1-div"/></div>
<div id="ver1" class="targetDiv">Versterken 1<input type="checkbox" class="checkbox" data-ptag="ver1-div"/></div>
<button class="close">Opslaan</button>
</div>
</div>
</div>
Javascript / Jquery:
window.addEventListener('load', function() {
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
});
$(function(){
$('.hide-div').hide();
$('.checkbox').change(function(){
if($('.checkbox:checked').length==0){
$('.hide-div').hide();
}else{
$('.hide-div').hide();
$('.checkbox:checked').each(function(){
$('#'+$(this).attr('data-ptag')).show();
});
}
});
});
$(function(){
$('.targetDiv').hide();
$('.showMob').click(function(){
$('.targetDiv').hide();
$('#mob1, #mob2, #mob3, #mob4').show();
});
$('.showRek').click(function(){
$('.targetDiv').hide();
$('#rek1').show();
});
$('.showStab').click(function(){
$('.targetDiv').hide();
$('#stab1').show();
});
$('.showVer').click(function(){
$('.targetDiv').hide();
$('#ver1, #ver2, #ver3, #ver4').show();
});
});
PS:我只是使用javascript / jquery的初学者
这就是我想出的。 我必须更改html才能使用我的代码。 您可以在这里看到所有内容: https : //jsfiddle.net/bindrid/xu9modma/41/
$(function($){
// get saved state
var storage = localStorage.divstate;
if(!storage){
// if no saved state, make new one and initialize everything to hidden.
storage = {'mob1-div':"none", "rek1-div":"none", "stab1-div":"none", "ver1-div":"none"};
localStorage.divstate = JSON.stringify(storage);
}
else {
storage = JSON.parse(storage);
}
$("#myModal").hide();
// set state of divs
$("#mob1-div").css("display", storage["mob1-div"]);
$("#rek1-div").css("display", storage["rek1-div"]);
$("#stab1-div").css("display", storage["stab1-div"]);
$("#ver1-div").css("display", storage["ver1-div"]);
// intialized the state of the checkboxes
$(".checkboxes div").hide();
$(".checkbox").each(function () {
var cb = $(this);
var data = cb.data("ptag");
this.checked = !(storage[data] == "none")
});
$("#myBtn").on("click", function(){$("#myModal").show()});
$("#btnCloseModal").on("click", function(){$("#myModal").hide()});
$(".buttons button").on("click", function(evt){
var ck = $(evt.target).data("target");
$(".checkboxes div").hide();
$("#" +ck).show();
});
$(".checkbox").on("click", function(evt){
var cb = $(evt.target);
var div = $("#" + cb.data("ptag"));
div.toggle(evt.target.checked);
var storage = JSON.parse(localStorage.divstate);
storage[cb.data("ptag")] = evt.target.checked?"":"none";
localStorage.divstate = JSON.stringify(storage);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.