如何可靠地检测复选框何时被选中，无论如何?

I'm looking for a way to detect when a checkbox checked value has been changed. addEventListener() or jQuery on() mostly work, but neither will detect a change made this way:

我正在寻找一种方法来检测选中复选框的值是否已经更改。addEventListener()或jQuery()主要工作，但都不会检测到这样的变化:

<input type="checkbox" id="testCheckbox">

<!--- some other script further down the page, not under my control -->
<script type="text/javascript">
   document.getElementById("testCheckbox").checked = true;
</script>

Is there a way I can detect this change ? Even something that only works in the latest browsers would be great.

有什么办法可以让我察觉到这种变化吗?即使是只在最新的浏览器中工作的东西也会很棒。

Edit: To be clear, I want to detect changes made by any script on the page. I don't necessarily control them, so I can't trigger an event myself.

编辑:要清楚，我想检测页面上任何脚本所做的更改。我不一定要控制它们，所以我自己不能触发事件。

4 个解决方案

#1

For what it's worth (not much, I'd say), you can do this in IE only using its proprietary propertychange event. In other browsers, I'm pretty certain your only option for now is polling.

就其价值而言(我得说不是很多)，你只能在IE中使用其专有的propertychange事件。在其他浏览器中，我很确定你现在唯一的选择就是轮询。

Demo: http://jsfiddle.net/X4a2N/1/

演示:http://jsfiddle.net/X4a2N/1/

Code:

代码:

document.getElementById("testCheckbox").onpropertychange = function(evt) {
    evt = evt || window.event;
    if (evt.propertyName == "checked") {
        alert("Checkedness changed!");
    }
};

#2

I don't think there is an elegant way. There is an Object.observe proposal for future versions of Javascript.

我不认为有什么优雅的方式。有一个对象。观察Javascript未来版本的建议。

For now you should trigger the change event as undefined suggested. You could also define a setter function that sets the value and triggers change for you.

现在，您应该按照未定义的建议触发更改事件。您还可以定义一个setter函数来设置值并为您触发更改。

#3

This is not possible. You must fire the Change event manually.

这是不可能的。您必须手动触发更改事件。

    Actions that invoke the CheckboxStateChange event:
          1. Changing the state of the checkbox by a mouse click.
          2. Changing the state of the checkbox with an accesskey.
          3. Changing the state of the checkbox with the SPACE key.

    Actions that do not invoke the CheckboxStateChange event:
          1. Changing the value of the checked property from script.

#4

At the moment there's still no way to do this without polling or using a shadow DOM framework like React that monitors state. This is because checkbox/radio .checked = true property change is a state change, not a DOM mutation. Here's a demo of this:

目前，如果不进行轮询或使用诸如React这样的影子DOM框架来监视状态，仍然没有办法做到这一点。这是因为checkbox/radio .checked =真正的属性更改是一个状态更改，而不是一个DOM突变。这里有一个演示:

http://jsfiddle.net/6DHXs/1/

#1