复选框 onchange 事件未触发答案

【问题标题】：Checkbox onchange event not firing复选框 onchange 事件未触发
【发布时间】：2015-08-09 21:05:20
【问题描述】：

我有以下设置：2 个复选框，这样当第一个被选中时，它会切换第二个的状态。第二个有一个 onchange 监听器，它应该在它发生变化时触发警报。

问题是，当我点击它时，onchange 会被触发，但是当我使用第一个来改变它的状态时，事件不会被触发。

我错过了什么？还是 onchange 事件基本上意味着像 onclick 一样？

<!DOCTYPE html>
<html>
<body>

  <form action="">
    <input id='one' type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input id='two' type="checkbox" name="vehicle" value="Car" checked>I have a car 
  </form>
  <script>
    function show(){
      alert(document.getElementById('two').checked);
    }

    document.getElementById('one').addEventListener('click', function(){
      var two = document.getElementById('two');
      two.checked = ! two.checked;
    });

    document.getElementById('two').addEventListener('change', function(){
      alert("changed");
    });
  </script>

</body>
</html>

感谢您的帮助:)

【问题讨论】：

我可能错了，但我不认为以编程方式更改复选框会触发它的更改事件。
您必须手动触发事件。见stackoverflow.com/questions/2856513/…
我的真实设置不是这样的，我正在使用一个名为 switchery 的库，它提供了时尚的复选框。该库隐藏了实际的复选框并创建了样式。但实际的复选框状态仍会更新以反映样式的状态。所以我想监听更改事件并根据需要更新角度范围变量。

标签： javascript jquery html events onchange

【解决方案1】：

如果目标是只选中一个复选框，这里有一个 jQuery 解决方案：

$(document).ready(function () {

    $('#one, #two').change(function (e) {
        if ($(this).prop('checked')) {
            $('#one, #two').not(this).prop('checked', false)
        }
    });

});

【讨论】：

【解决方案2】：

您正在更改一个不会触发事件的属性，您可以触发更改事件，或者点击第二个复选框。

尝试改变：

document.getElementById('one').addEventListener('click', function(){
  var two = document.getElementById('two');
  two.checked = ! two.checked;
});

收件人：

document.getElementById('one').addEventListener('click', function(){
  document.getElementById('two').click()
});

另一种解决方案是触发更改事件：

document.getElementById('one').addEventListener('click', function(){
  var two = document.getElementById('two');
  two.checked = ! two.checked;
  two.dispatchEvent('change');
});

【讨论】：

对第二种方案的小修正（根据MDN）：two.dispatchEvent(new Event('change'));
stackoverflow.com/a/10159237/658035引用Microsoft网页说出以下“当Select对象的所选选项以编程方式更改时，Onchange事件不会启动。”我在其他地方没有遇到过这样的声明，但在几个浏览器中似乎是正确的，并且在这个答案的开头已经说明了。