jeudi 22 décembre 2022

Hide div with checkbox value in localstorage

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