如何使用Javascript/JQuery同步ExtJS复选框样式按钮

原代码存在的核心问题 #

• 直接比较classList对象：classList是DOM内置的类名集合对象，==比较的是内存地址而非类名内容，原判断逻辑永远无法生效
• 滥用e.preventDefault()：会阻断ExtJS自带的复选框状态切换逻辑，导致选中类x-form-cb-checked不会更新，状态完全不变化
• 没有循环触发防护：点击A触发B点击，B的监听又会触发A点击，进入无限循环，甚至可能导致页面卡顿
• 初始化同步逻辑错误：原判断条件用||逻辑有误，无法覆盖所有两个复选框状态不一致的场景

修正后可运行代码 #

// 变量定义
var srcFFR = "checkbox-1097";
var destFFR = "checkbox-1134";
var srcFFRb = "checkbox-1097-inputEl";
var destFFRb = "checkbox-1134-inputEl";
// 同步锁，防止循环触发点击
var isSyncing = false;

// 页面加载时同步状态
var srcChk = document.getElementById(srcFFR).classList.contains('x-form-cb-checked');
var destChk = document.getElementById(destFFR).classList.contains('x-form-cb-checked');
// 仅当两个状态不一致时才同步，默认以源复选框状态为准，可根据需求调整
if (srcChk !== destChk) {
    isSyncing = true;
    if (srcChk) {
        !destChk && document.getElementById(destFFRb).click();
    } else {
        destChk && document.getElementById(destFFRb).click();
    }
    // 等待ExtJS状态更新完成后释放锁
    setTimeout(() => isSyncing = false, 50);
}

// 源复选框点击监听
$(document.getElementById(srcFFRb)).on('click', function() {
    if (isSyncing) return;
    isSyncing = true;
    // 等待ExtJS更新完源复选框的状态后再同步目标
    setTimeout(() => {
        const currentSrcState = document.getElementById(srcFFR).classList.contains('x-form-cb-checked');
        const currentDestState = document.getElementById(destFFR).classList.contains('x-form-cb-checked');
        if (currentSrcState !== currentDestState) {
            document.getElementById(destFFRb).click();
        }
        setTimeout(() => isSyncing = false, 50);
    }, 50);
});

// 目标复选框点击监听，实现双向同步
$(document.getElementById(destFFRb)).on('click', function() {
    if (isSyncing) return;
    isSyncing = true;
    setTimeout(() => {
        const currentDestState = document.getElementById(destFFR).classList.contains('x-form-cb-checked');
        const currentSrcState = document.getElementById(srcFFR).classList.contains('x-form-cb-checked');
        if (currentDestState !== currentSrcState) {
            document.getElementById(srcFFRb).click();
        }
        setTimeout(() => isSyncing = false, 50);
    }, 50);
});

关键修改说明 #

• 新增isSyncing锁标记：同步过程中会忽略后续的点击事件，彻底避免双向触发的死循环问题
• 移除e.preventDefault()调用：保留ExtJS原生的状态切换逻辑，确保点击后类名能正常更新
• 用setTimeout延迟状态判断：适配ExtJS异步更新类名的逻辑，确保读取到的是最新的选中状态
• 修正状态判断逻辑：直接读取x-form-cb-checked类的存在性判断选中状态，逻辑更可靠
• 修正初始化同步逻辑：仅当两个复选框状态不一致时才执行同步操作，避免无意义的点击触发

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