如何选中和取消选中复选框 onload function？

Question

I have a code in which if my checkbox is checked and if I load window(page) checkbox should remain there on reload OR if I uncheck the checkbox and reload page then checkbox should remain unchecked. my code is as following.

 <input type="checkbox" id="chk"> <script> window.onload = onPageLoad(); function onPageLoad() { if (document.getElementById("chk").checked == true) { document.getElementById("chk").checked = true; } else { document.getElementById("chk").checked = false; } } </script>

However above code returns unchecked checkbox even after reloading page after checking checkbox.

Answer 1

Just add "checked" attribute to HTML tag:

<input type="checkbox" checked>

But if you need to keep checked input after page reload you need to add a storage info. Maybe help:

<input type="checkbox" id="chk">

<script>

window.addEventListener('load', function() {
    document.querySelector("#chk").addEventListener('change', function(el) {
        console.log(el.target.checked);
        localStorage.setItem('input_checked', el.target.checked );
    });

    if ( localStorage.getItem('input_checked') !== null ) {
        document.querySelector('#chk').checked = localStorage.getItem('input_checked') === 'true';
    }
});

</script>