如何将 ExtJS“复选框”（按钮）与 Javascript/JQuery 同步？答案

【问题标题】：How to synchronise ExtJS "checkboxes" (buttons) with Javascript/JQuery?如何将 ExtJS“复选框”（按钮）与 Javascript/JQuery 同步？
【发布时间】：2021-08-30 22:25:26
【问题描述】：

我目前正在尝试在一个页面上同步两个checkboxes。

我需要同步复选框 - 为此，我使用 Tampermonkey 用户脚本在其中一个被点击时拾取。但是，我不知道该怎么做。

我相信它们实际上不是复选框，而是类似于复选框的 ExtJS 按钮。我无法检查是否使用 JQuery 检查了它们，因为：一旦按钮后面的 JS 运行，检查的值就会附加到一个类中。

我尝试过 preventDefault 和 stopPropagation，但要么我使用错误，要么不了解它的用法。

我不够聪明，不能只调用盒子后面的 JS 而不是 onclick 事件。否则，这将解决我的问题。

这是我的代码：

//Variables - "inputEl" is the actual button.
var srcFFR = "checkbox-1097";
var destFFR = "checkbox-1134";
var srcFFRb = "checkbox-1097-inputEl";
var destFFRb = "checkbox-1134-inputEl";

//This checks if they're synchronised on page load and syncs them with no user intervention.
var srcChk = document.getElementById(srcFFR).classList.contains('x-form-cb-checked');
var destChk = document.getElementById(destFFR).classList.contains('x-form-cb-checked');

if (srcChk == true || destChk == false) {
    document.getElementById(destFFRb).click();
} else if (destChk == true || srcChk == false) {
    document.getElementById(srcFFRb).click();
}

//This is where it listens for the click and attempts to synchronize the buttons.

$(document.getElementById(srcFFRb)).on('click', function(e) {
    e.preventDefault();
    if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
        return false;
    } else {
        document.getElementById(destFFRb).click();
    }
});

$(document.getElementById(destFFRb)).on('click', function(e) {
    e.preventDefault();
    if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
        return false;
    } else {
        document.getElementById(srcFFRb).click();
    }
});

我有点不知所措...任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery checkbox extjs userscripts

【解决方案1】：

想通了——我只是在比较班级列表，而没有挑选出我想要真正匹配的内容。

我的解决方案：

$(document.getElementById(srcFFRb)).on('click', function(){
    if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
        == document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
        return false;}
    else {
        document.getElementById(destFFRb).click();;
    }});

$(document.getElementById(destFFRb)).on('click', function(){
    if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
        == document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
        return false;}
    else {
        document.getElementById(srcFFRb).click();;
    }});

【讨论】：