为何label的for属性绑定input id后，无需JS触发checkbox选中的功能失效？

失效原因 #

你给<label>标签添加了不属于它的href属性，href是<a>标签的专属属性，添加后会导致浏览器解析标签语义异常，优先触发空锚点跳转逻辑，覆盖了label默认的关联表单控件点击触发效果。

修复方案 #

直接删除label上的href="#"属性即可，修正后的代码如下：

<label for="burger" class="hamburgerMenu">&#8801;</label>
<input type="checkbox" id="burger" />

如果修改后仍然无法生效，可以排查以下常见问题：

• 确认for属性值和input的id属性值完全一致，该值区分大小写
• 确认当前页面内没有其他id为burger的重复元素，重复id会导致label关联错乱
• 检查CSS规则中有没有给该label设置pointer-events: none，该属性会屏蔽元素的所有点击交互
• 检查有没有其他JS逻辑拦截了label的点击事件冒泡

内容的提问来源于stack exchange，提问作者Tibo Mertens