jQuery 单选输入 .on('change') 触发两次

Question

我有以下代码：http : //jsfiddle.net/0Lp4oqn6/

On <input type='radio' name='radio' class='radio' value='on'>
Off <input type='radio' name='radio' class='radio' value='off'>

$('.radio').on('change', function() {
    alert( $(this).val() )
}).trigger('change')

这是一组简单的 2 个无线电输入和一个用于无线电输入值更改时的事件处理程序。还有一个.trigger('change')为了在页面加载时触发事件处理程序发生一次。

当页面加载时，事件处理程序被触发两次。第一个警报会说on，第二个警报会说off。但是当我手动单击单选按钮时，更改处理程序不会被触发两次。

为什么在使用时事件处理程序被触发两次.trigger('change')？为什么手动执行时行为会有所不同？以编程方式触发事件处理程序而不发生两次的正确方法是什么？

Answer 1

该事件将在集合中的每个元素上触发，无论它们的选中状态如何。两个收音机意味着触发了两个事件

最好只在其中一个被实际检查时才触发它，并且只在特定的一个上触发。

您可以使用filter(':checked')来定位选中的一个，如果有一个

当您手动更改收音机时，更改事件只会在选中的收音机上触发

$('.radio').on('change', function() {
  console.log('Checked value =', $(this).val())
}).filter(':checked').trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
On <input type='radio' name='radio' class='radio' value='on'> 
Off <input type='radio' name='radio' class='radio' value='off' checked>