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

注意：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不是一个选项，我需要香草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);

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

你必须用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 （全部小写）

小提琴

编辑

我想避免为每个将检查此框的链接添加复杂性。
所以理想情况下......我不想改变链接/点击逻辑。
我希望能够在代码中的任何位置更改.checked属性，并且在每次更改时都无需额外的逻辑即可检测到它（如果可能）。

这并不是真的可能，没有使用可怕的黑客间隔等。当检查状态改变编程方式事件处理程序根本没有触发，因为这在大多数情况下真的是一个巨大的问题，更难解决相反的情况，您只需手动触发事件处理程序，而这是真正实现它的唯一方法。

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

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>

等等

if(document.getElementById('myCheck').checked){document.getElementById("myCheck").checked = false;} else{document.getElementById("myCheck").checked = true;}

你可以调用/触发一个事件，但并不像看起来那么容易，特别是当你必须处理Internet Explorer时。

最简洁的解决方案是将您的事件放入自己的功能中，然后在需要的地方调用它。

function handleEvent(){
    console.log('Changed!');
}

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

上一篇: Dynamically changing a checkbox doesn't trigger onChange?

下一篇: Check if the Checkbox with the Value X gets unchecked?