如何监听脚本修改的checkbox.checked状态变化？

你第二种方案的问题在于直接替换了原生的checked属性访问器，把复选框本身的状态同步逻辑给覆盖了——所以修改led_val不会更新复选框外观，点击复选框也没法同步到你的变量里。

正确的做法是复用原生的getter和setter，同时插入自己的通知逻辑，这样既能保留复选框的正常交互，又能捕获所有对checked的修改（包括脚本赋值、用户点击）。代码如下：

const led = document.getElementById('led');
// 获取原生checked属性的描述符
const originalCheckedDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'checked');

// 重新定义当前复选框的checked属性
Object.defineProperty(led, 'checked', {
  get() {
    // 调用原生getter返回真实状态
    return originalCheckedDescriptor.get.call(this);
  },
  set(newVal) {
    // 先调用原生setter更新DOM状态
    originalCheckedDescriptor.set.call(this, newVal);
    // 这里添加你的通知逻辑
    console.log(`checked属性被修改为: ${newVal}`);
  },
  // 继承原生属性的可枚举、可配置特性
  enumerable: originalCheckedDescriptor.enumerable,
  configurable: originalCheckedDescriptor.configurable
});

测试效果：

• 执行led.checked = true，复选框会显示勾选，同时控制台输出通知
• 用户点击复选框，状态会正常切换，控制台也会输出对应的通知

如果需要区分是用户操作还是脚本修改，可以加个标记变量辅助判断：

let isUserAction = false;
led.addEventListener('click', () => {
  isUserAction = true;
});

// 在setter里判断
set(newVal) {
  originalCheckedDescriptor.set.call(this, newVal);
  const actionType = isUserAction ? '用户操作' : '脚本修改';
  console.log(`checked被${actionType}为: ${newVal}`);
  isUserAction = false;
}

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