javascript - 动态更改复选框不会触发 onChange？

Question

注意:jQuery 不是一个选项。

我想检测复选框状态的变化，但是当我这样做时 onChange 事件似乎没有触发:

document.getElementById('myCheckBox').addEventListener('change',function() {
    console.log('Changed!');
});
document.getElementById('someLink').onClick = function() {
    // toggle checkbox
    document.getElementById('myCheckBox').checked = !document.getElementById('myCheckBox').checked;
};

当我单击#someLink 时，不会触发更改事件。我可以向#myLink 添加另一个监听器，但是如果我添加其他选中同一个框的链接，我必须添加更多监听器。我想要一个复选框更改事件的监听器。同样，jQuery 不是一个选项，我需要 vanilla JS。

编辑:很抱歉，如果我没有说得更清楚，但我想避免增加每个将选中此框的链接的复杂性。所以理想情况下(也许答案是这是不可能的)我根本不想改变链接/点击逻辑。我希望能够在代码中的任何位置更改 .checked 属性，并且在每次更改时无需额外逻辑即可检测到它(如果可能)。

更新:

好吧，显然没有办法在不改变 onClick 逻辑的情况下很好地做到这一点，所以(就像某种动物一样)我最终暴力解决了如下问题:

function mySentinel() {
    if(document.getElementById('myCheckBox').checked) {
        console.log("I've been checked!");
        return;
    }
    setTimeout("mySentinel()",100);
}
// then call this somewhere in the on document load section...
mySentinel();

如果您还需要，您可以添加某种超时:

function mySentinel(var i) {
    if(document.getElementById('myCheckBox').checked) {
        console.log("I've been checked!");
        return;
    }
    if(i <= 0) {
        console.log("Time out. Still not checked");
    }
    i--;
    setTimeout("mySentinel("+i+")",100);
}
// then call this somewhere in the on document load section...
// 60 second timeout (some math can make the argument look nicer)
mySentinel(600);

Answer 1

这是正确的，以编程方式更改输入的值或检查状态不会触发事件处理程序。

您还必须使用 javascript 触发事件

document.getElementById('myCheckBox').addEventListener('change',function() {
    console.log('Changed!');
});

document.getElementById('someLink').onclick = function() {
    var box = document.getElementById('myCheckBox')
    box.checked = !box.checked;

    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        box.dispatchEvent(evt);
    } else {
        box.fireEvent("onchange");
    }
};

注意它是 onclick(全部小写)

FIDDLE

---

编辑

I want to avoid adding complexity to each link that will check this box.
So ideally ... I don't want to have to alter the link/click logic at all.
I want to be able to change the .checked property anywhere in the code and have it be detected without additional logic at each change (if possible).

如果不使用间隔等可怕的技巧，那是不可能的。当以编程方式更改检查状态时，根本不会触发事件处理程序，因为在大多数情况下这确实是一个大问题，并且更难解决相反的情况，在这种情况下您只需手动触发事件处理程序，并且这确实是唯一的方法。

当然，你可以使用类和外部函数等使它更方便

document.getElementById('myCheckBox').addEventListener('change',function() {
    console.log('Changed!');
});

var links = document.querySelectorAll('.someLinkClass');

for (var i = links.length; i--;) {
    links[i].addEventListener('click', triggerChange, false);
}


function triggerChange() {
    var box = document.getElementById('myCheckBox')
    box.checked = !box.checked;

    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        box.dispatchEvent(evt);
    } else {
        box.fireEvent("onchange");
    }
};

无论何时添加链接，您只需添加该类

<a href="#" class="someLinkClass">Change the checkbox</a>
<a href="#" class="someLinkClass">Change the checkbox again</a>
<a href="#" class="someLinkClass">Change the checkbox even more</a>

等等