取消选中复选框什么都不做[重复]

Question

这是我的菜单栏
关闭：

已打开：

当窗口超过某个断点时，我希望菜单栏关闭。 这是代码：
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;
        }
    }
})

即使在控制台中，我看到 check 在断点后有一个 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");