Question 290597 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Validate if my checkbox is selected or not and save its status in real time

I have a checkbox that if I select it, my container is hidden and if I deselect it, the container is shown again.

I’m trying to save the state in localstorage. So if the page refreshes or changes, the checkbox maintains its state

Sorry if I don’t explain myself well, how could I achieve this? Thank you
My code so far

<label class="switch">
    <input type="checkbox" id="myToggle">
    <span class="slider round"></span>
</label>

<div id="main-container">
    HELLO
</div>

<script>
    const checkbox = document.getElementById('myToggle')
    checkbox.addEventListener('change', (event) => {
        if (event.currentTarget.checked) {
            const a = localStorage.setItem('my_variable', 'activated');
        } else {
            localStorage.removeItem('my_variable');
        }
    })

    function hideshowContainer(){
        if( a == 'activated'){
            document.getElementById('main-container').style.display="none";
        }else{
           document.getElementById('main-container').style.display="block"; 
        }
    }
</script>
Tags:

2

Answers


  1. 0

    Try this code

    [https://jsfiddle.net/f92awop1/]

    <label class="switch">
    <input type="checkbox" id="myToggle">
    <span class="slider round"></span>
</label>

<div id="main-container">
    HELLO
</div>

<script>
    const checkbox = document.getElementById('myToggle');
    
    // Load the checkbox state from localStorage on page load
    const savedState = localStorage.getItem('my_variable');
    if (savedState === 'activated') {
        checkbox.checked = true;
        hideshowContainer();
    }

    checkbox.addEventListener('change', (event) => {
        if (event.currentTarget.checked) {
            localStorage.setItem('my_variable', 'activated');
        } else {
            localStorage.removeItem('my_variable');
        }
        hideshowContainer();
    })

    function hideshowContainer() {
        const currentState = localStorage.getItem('my_variable');
        if (currentState === 'activated') {
            document.getElementById('main-container').style.display = "none";
        } else {
            document.getElementById('main-container').style.display = "block";
        }
    }
</script>
    Login or Signup to reply.
  2. 0

    Your code is most of the way there. You just need to also read the state of the localStorage value when the page next loads, like this:

    const checkbox = document.querySelector('#myToggle');
const container = document.querySelector('#main-container');
const hideShowContainer = toggle => {
    container.style.display = toggle ? 'block' : 'none';
}

// set state when the box is checked
checkbox.addEventListener('change', e => {  
  hideShowContainer(e.target.checked);
  localStorage.setItem('toggle', e.target.checked);
});

// set state when the page loads
const toggleStateOnLoad = localStorage.getItem('toggle') == 'true';
hideShowContainer(toggleStateOnLoad);
checkbox.checked = toggleStateOnLoad;

    Here’s a full working example in jsFiddle, as SO snippets are sandboxed and cannot access localStorage.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search