复选框 onchange 事件未触发

Question

我有以下设置：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>

感谢您的帮助:)

Answer 1

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

尝试更改：

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');
});

Answer 2

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

$(document).ready(function () {

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

});

复选框 onchange 事件未触发

Checkbox onchange event not firing

html

javascript

jquery

events

onchange