Question

我正在寻找一种方法来检测复选框选中的值何时被更改。 addEventListener()或jQuery on()大部分都有效，但两者都不会检测到这种变化：

<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>

有没有办法可以检测到这种变化？即使只适用于最新浏览器的东西也会很棒。

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

Answer 1

我认为没有一种优雅的方式。对于Javascript的未来版本，有一个Object.observe提案。

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

Answer 2

对于它的价值（不多，我会说），你只能使用其专有的propertychange事件在IE中执行此操作。在其他浏览器中，我很确定你现在唯一的选择是轮询。

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

代码：

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

Answer 3

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

    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.

Answer 4

目前，如果没有轮询或使用像React监视状态的影子DOM框架，仍然无法做到这一点。这是因为复选框/无线电.checked = true属性更改是状态更改，而不是DOM突变。这是一个演示：

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

如何可靠地检测复选框何时被检查，无论如何？

4 个答案: