javascript - 当javascript达到一定宽度时如何取消选中复选框？

Question

我正在尝试使我的网站具有响应能力。目前，当我将宽度增加到 640 以上并再次减小到低于 640 时，我的复选框仍保持选中状态。

这是我当前的 html 代码。

<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
        <div class="hamburger">
            <label class="toggle">
                <input type="checkbox">
                <div>
                    <div>
                        <span></span>
                        <span></span>
                    </div>
                    <svg>
                        <use xlink:href="#path">
                    </svg>
                    <svg>
                        <use xlink:href="#path">
                    </svg>
                </div>
            </label>

            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" id="path">
                    <path d="M22,22 L2,22 C2,11 11,2 22,2 C33,2 42,11 42,22"></path>
                </symbol>
            </svg>
        </div>

这是我当前的 javascript 与之配合。(正在运行)

var toggle = document.querySelector('.toggle input')
var animate = setInterval(() => {
    toggle.checked = !toggle.checked
}, 3000)

document.querySelector('body').addEventListener('click', () => {
  clearInterval(animate);
})

我尝试使用此代码来调整大小，但它似乎不起作用......

window.addEventListener('resize', function() {
    if (window.matchMedia('(min-width: 640px)').matches) {
        document.getElementById('toggle').checked = false;
    }
}, true);

我对此很陌生，所以我可能错过了一些盲目明显的东西。

事实证明，除了此 ID 语法错误之外，document.getElementById 也未正确引用函数路径。

Answer 1

按照这个方法做

var toggle = document.querySelector('.toggle input')
var animate = setInterval(() => {
    toggle.checked = !toggle.checked
}, 3000)

document.querySelector('body').addEventListener('click', () => {
  clearInterval(animate);
});

function displayWindowSize(){
    var w = document.documentElement.clientWidth;

    if(w > 300){
      //do Your logic here
    }
}
     
window.addEventListener("resize", displayWindowSize);
    
// Calling the function for the first time
//displayWindowSize();

<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<div class="hamburger">
    <label class="toggle">
        <input type="checkbox">
        <div>
            <div>
                <span></span>
                <span></span>
            </div>
            <svg>
                <use xlink:href="#path">
            </svg>
            <svg>
                <use xlink:href="#path">
            </svg>
        </div>
    </label>

    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" id="path">
            <path d="M22,22 L2,22 C2,11 11,2 22,2 C33,2 42,11 42,22"></path>
        </symbol>
    </svg>
</div>