取消选中复选框什么都不做

Question

这是我的菜单栏
关闭：

打开：

当 window 超过某个断点时，我希望菜单栏关闭。这是代码：
html

<div class="d-md-none" id="menuButton">
                <input id="responsive-menu" type="checkbox" onchange="handleChange(this)">
                <label id="menuButtonMin" for="responsive-menu">
                <svg class="ham hamRotate ham4" viewBox="0 0 100 100" width="50" onclick="this.classList.toggle('active')">
                    <path class="line top" d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20"></path>
                    <path class="line middle" d="m 70,50 h -40"></path>
                    <path class="line bottom" d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20"></path>
                </svg>
                </label>
            </div>

JS

window.addEventListener('resize', function(){
    const check = document.getElementById('responsive-menu');
    if(check.checked){
        if (window.innerWidth > 845){
            check.checked = false;
        }
    }
})

即使在控制台中，我看到断点后的检查值为 False，但菜单仍然打开。有什么帮助吗？

Answer 1

更改选中的值不会触发 onchange 事件。你必须自己触发它。在 check.checked = false; 之后添加：

if ("createEvent" in document) {
  var evt = document.createEvent("HTMLEvents");
  evt.initEvent("change", false, true);
  check.dispatchEvent(evt);
}
else
  element.fireEvent("onchange");

取消选中复选框什么都不做

Unchecking checkbox does nothing

html

javascript

checkbox

menu