复选框样式切换事件绑定技巧

根本原因有三：

1. 事件绑定方式错误：在函数内部重复调用 addEventListener，使同一回调被多次注册；
2. 状态读取方式错误：<input type="checkbox"> 的勾选状态应通过 checked 属性（布尔值）获取，而非 value（默认为 "on" 字符串）；
3. 事件类型不匹配：复选框的用户交互本质是“状态变更”，应使用 change 事件而非 click，后者可能在未真正改变状态时触发（如重复点击已勾选项）。

✅ 正确做法如下：

• 使用 document.querySelector 一次性获取表单和内部复选框（推荐通过 name 属性直接访问：form.name）；
• 为复选框绑定 change 事件监听器，仅需一次注册；
• 通过 element.checked 准确读取布尔状态；
• 利用 CSS 自定义属性（--font）动态更新全局字体样式。

const root = document.querySelector(':root');
const form = document.querySelector('#accesibleForm');

// 通过 name 属性直接访问复选框（语义清晰、无需 ID）
form.fontChkBx.addEventListener('change', (e) => {
  const newFont = e.target.checked 
    ? 'cursive, sans-serif' 
    : 'sans-serif';

  root.style.setProperty('--font', newFont);
  console.log('字体可访问性已更新 →', e.target.checked);
});

对应 HTML 应保持语义化与简洁：

<form id="accesibleForm">
  <label>
    &lt;input type=&quot;checkbox&quot; name=&quot;fontChkBx&quot; checked&gt;
    Use custom font
  </label>
</form>
<p>Example Text</p>

⚠️ 注意事项：

• 避免在事件处理函数中再次调用 addEventListener，所有监听器应在初始化阶段统一注册；
• 不要依赖 onclick 内联属性，它混杂逻辑与结构，不利于维护与测试；
• 若需兼容旧版浏览器，form[name] 访问方式在 IE9+ 完全支持，比 getElementById 更具语义优势；
• 可进一步增强可访问性：为 添加 for 属性或采用嵌套写法（如示例），确保屏幕阅读器正确关联控件与文本。

通过以上重构，字体切换功能将稳定响应每一次状态变更，符合 Web 可访问性（WCAG）原则，同时具备良好的可维护性与扩展性。

本篇关于《复选框样式切换事件绑定技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！