如何解决取消选中复选框不起作用
当窗口超过某个断点时,我希望菜单栏关闭。
这是代码:
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,菜单仍处于打开状态。有什么帮助吗?
解决方法
更改检查值不会触发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");
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。