如何捕获单选按钮取消选择事件：超越 onChange 限制

单选按钮混乱：解决 onChange 限制

单选按钮提供了一种处理单个选择的便捷方法，但捕获其完整状态更改可能会很困难。具有挑战性的。考虑一个场景，我们有多个同名的单选按钮，并且需要跟踪选择和取消选择。

onChange 事件似乎是一个明显的选择，但当取消选择单选按钮时它不会触发。这在我们需要捕获已选中和未选中事件的情况下会产生问题。

解决方法

一种解决方法是利用 addEventListener 方法并附加更改事件处理程序到每个单选按钮。在事件处理程序内部，我们可以使用变量维护对先前选中的单选按钮 (prev) 的引用。

选中单选按钮时，我们会记录先前的值 (prev.value) 和当前的值值（这个值）。这使我们能够捕获选中和未选中的事件。

<code class="js">var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}

随附的 HTML 代码：

<code class="html"><form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form></code>

通过此解决方法，我们有了一个通用的解决方案，可以捕获所有单选按钮的 onChange 事件按钮，包括取消选择事件。

以上是如何捕获单选按钮取消选择事件：超越 onChange 限制的详细内容。更多信息请关注PHP中文网其他相关文章！