In my project i have a few div's which needs to be hidden when a checkbox is checked. For clarity: the checkbox is on page 1, the div is on page 2. I managed to save the checkbox value to the LocalStorage, now i want to hide the div when the checkbox is checked.
HTML of the checkbox:
<input type="checkbox" id="3" class="functiebox" checked>Nieuwbouw</input><br>
JS to save the value to LocalStorage:
function saveValue(e) {
var id = e.id;
var val = e.value;
localStorage.setItem(id, val);
}
function getSavedValue(v) {
if (!localStorage.getItem(v)) {
return "";
}
return localStorage.getItem(v);
}
let boxes = document.getElementsByClassName('functiebox').length;
function save() {
for (let i = 1; i <= boxes; i++) {
var checkbox = document.getElementById(String(i));
localStorage.setItem("checkbox" + String(i), checkbox.checked);
}
}
//for loading
for (let i = 1; i <= boxes; i++) {
if (localStorage.length > 0) {
var checked = JSON.parse(localStorage.getItem("checkbox" + String(i)));
document.getElementById(String(i)).checked = checked;
}
}
window.addEventListener('change', save);
The HTML of the div i want to hide/unhide by checking the checkbox:
<div id="afd_bestaand">
div that needs to be hidden when checkbox is checked.
</div>
I tried a lot of things but couldn't figure out what works. I hope you can help me out!
Thanks in advance!
Aucun commentaire:
Enregistrer un commentaire