Issues with checkbox for menu and javascript

I'm learning web development... And i'm stuck.

i have a checkbox menu, when its checked i have to hide the menu. by default for a large screen the menu is displayed and the checkbox is unchecked and by default when the screen is under 930px the checkbox have to be checked... thats my problem I don't know how to setup that: my code is this

    var largeur = window.innerWidth;
    var checkbox = document.querySelector('input[name=menuOn]');

    if(largeur< 930) {
        checkbox.checked;
        checkbox.addEventListener('change',function(){
            if(this.checked) {
                document.getElementById('testHide').style.display = "none";
                document.getElementById('altMenu').style.display = "unset";
            }
            else {
                document.getElementById('testHide').style.display = "unset";
                document.getElementById('altMenu').style.display = "none";
            }

        })}

For the script

my html is this

 <div class="switchContainer">
     <input type="checkbox" class="headerSwitch" name="menuOn">
<p id="altMenu" class="altMenu">Menu</p> 
 </div>

I don't know where is the probleme and if i am on the good way to do that. Sorry for my english.

Paul