Блог

В настоящее время я пытаюсь синхронизировать два checkboxes на странице.

Мне нужно, чтобы флажки были синхронизированы — с этой целью я использую пользовательский скрипт Tampermonkey, чтобы получать информацию при нажатии на один из них. Однако я не знаю, как это сделать.

Я считаю, что на самом деле это не флажки, а кнопки ExtJS, которые напоминают флажки. Я не могу проверить, проверяются ли они с помощью jQuery из-за этого: проверенное значение добавляется к классу после запуска JS за кнопкой.

Я пытался предотвратить дефолт и остановить распространение, но либо я использую его неправильно, либо не понимаю его использования.

Я не настолько умен, чтобы просто вызывать 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();
    }
});
 

Я в некотором замешательстве…Любая помощь была бы очень признательна.

Понял это — я сравнивал списки классов, не выделяя то, что я хотел на самом деле сопоставить.

Мое решение:

 $(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();;
    }});