动态更改复选框不会触发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 （全部小写）

小提琴

---

编辑

我想避免为每个链接添加复杂性来检查此框。
理想情况......我根本不想改变链接/点击逻辑。
我希望能够在代码中的任何位置更改.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>

等等

Answer 2

1. 如果要添加更多将触发复选框的链接，请为它们创建类名并使用getElementByClass('classname')
2. 在你的HTML中使用onclick，而不是js。 示例： <div onclick="doSomething()"></div>

3. 只需使用if / else语句进行检查/取消选中：

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

Answer 3

您可以调用/触发事件，但它并不像看起来那么容易，尤其是当您必须处理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();
};

Answer 4

我认为jQuery有一个改变事件。 而你并没有以良好的方式使用它。

阅读本页： http ： //api.jquery.com/change/

并且： jQuery复选框更改并单击事件

当复选框中发生任何更改时，将调用jQuery事件函数。 然后你可以在这个事件函数中写任何东西