如何用原生JS实现复选框双向同步，仅监听用户手动触发的change事件？

方法一：利用event.isTrusted区分用户操作与代码触发 #

浏览器原生提供了event.isTrusted属性，用户手动触发的事件该值为true，代码触发的事件则为false。我们可以在事件回调里先判断这个属性，只响应用户手动操作的情况：

document.querySelectorAll('.mypost').forEach(post => {
    const topCheckbox = post.querySelector('.button-check-top .button-check');
    const bottomCheckbox = post.querySelector('.button-check-bottom .button-check');

    topCheckbox.addEventListener('change', (e) => {
        if (e.isTrusted) { // 仅处理用户手动操作
            bottomCheckbox.checked = topCheckbox.checked;
        }
    });

    bottomCheckbox.addEventListener('change', (e) => {
        if (e.isTrusted) { // 仅处理用户手动操作
            topCheckbox.checked = bottomCheckbox.checked;
        }
    });
});

这里直接修改checked属性而非调用click()，因为click()会模拟用户点击并再次触发change事件，而直接修改属性不会触发事件，从根源避免了循环。

方法二：用标志位控制事件执行（兼容旧浏览器） #

如果需要兼容不支持event.isTrusted的旧环境，可以手动添加标志位，标记当前是否处于代码同步状态：

document.querySelectorAll('.mypost').forEach(post => {
    const topCheckbox = post.querySelector('.button-check-top .button-check');
    const bottomCheckbox = post.querySelector('.button-check-bottom .button-check');
    let isSyncing = false; // 同步状态标志位

    const syncCheckboxes = (source, target) => {
        if (isSyncing) return;
        isSyncing = true;
        target.checked = source.checked;
        isSyncing = false;
    };

    topCheckbox.addEventListener('change', () => syncCheckboxes(topCheckbox, bottomCheckbox));
    bottomCheckbox.addEventListener('change', () => syncCheckboxes(bottomCheckbox, topCheckbox));
});

同步开始时将isSyncing设为true，此时若事件被代码触发会直接跳过；同步完成后重置标志位，不影响下一次用户操作。

原代码循环的原因 #

你之前用click()方法触发状态变更，这个方法会模拟用户点击行为，进而触发change事件，导致两个Checkbox的事件回调互相调用，形成无限循环。而直接修改checked属性不会触发change事件，就能彻底避免这个问题。

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