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事件未触发

2 个答案: