最可靠的方式是监听 change 事件，因其在用户交互真正导致值变化时才触发，语义准确、兼容性好；click 事件时机不可靠，disabled 复选框不触发 change，脚本修改 checked 需手动 dispatch。

监听复选框（<input type="checkbox">）的勾选状态改变，最可靠的方式是监听 change 事件，而不是 click 或 input。因为 change 事件在用户交互真正导致控件值变化时才触发，语义准确、兼容性好、不易误判。

用 change 事件监听状态变化

这是标准且推荐的做法。当用户点击复选框，或通过键盘（空格键）切换状态后，change 事件才会触发，此时 checked 属性已更新为最新值。

• 直接绑定到单个复选框：

const checkbox = document.getElementById('myCheckbox');
checkbox.addEventListener('change', function() {
  console.log('当前是否选中：', this.checked); // true 或 false
});

• 监听多个复选框（委托方式更高效）：

document.body.addEventListener('change', function(e) {
  if (e.target.type === 'checkbox') {
    console.log(e.target.id, '状态变为：', e.target.checked);
  }
});

不要用 click 事件替代 change

click 事件在鼠标按下/抬起时就触发，但此时复选框的 checked 状态可能还没更新（尤其在某些旧版浏览器或特殊操作下），容易读到“旧值”。虽然多数现代浏览器中 click 后立即读 checked 也正确，但它不保证语义——比如用户右键菜单勾选、脚本调用 click() 方法等场景，click 会触发但未必代表状态真实改变。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• ❌ 不推荐（时机不可靠）：

checkbox.addEventListener('click', () => {
  console.log('点击了，但 checked 可能还没变：', checkbox.checked);
});

注意 disabled 复选框不会触发 change

如果复选框被设为 disabled，它既不能被用户操作，也不会触发 change 事件。若需响应“禁用状态下状态被脚本修改”，应手动调用逻辑，因为 DOM 属性变更本身不会派发事件。

• 脚本修改 checked 不会自动触发 change：

checkbox.checked = true; // 此时不会触发 change 事件
// 如需同步通知，可手动 dispatch：
checkbox.dispatchEvent(new Event('change', { bubbles: true }));

获取初始状态和后续变化

页面加载后，复选框可能已有默认勾选（如 checked 属性存在或 defaultChecked 为 true）。监听 change 只捕获后续变化，如需知道初始状态，应在监听前主动读取：

const cb = document.getElementById('myCheckbox');
console.log('初始状态：', cb.checked);

cb.addEventListener('change', () => {
  console.log('状态已更新为：', cb.checked);
});

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南