javascript - 单选按钮的 OnChange 事件处理程序(输入类型 ="radio")不能作为一个值工作

Question

我正在为此寻找一个通用的解决方案。

考虑 2 个具有相同名称的 radio 类型输入。提交时，被检查的那个决定了与表单一起发送的值:

<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />

取消选择单选按钮时不会触发更改事件。因此，如果已经选择了带有 value="1" 的 radio 并且用户选择了第二个，则 handleChange1() 不会运行。这带来了一个问题(无论如何对我来说)，因为没有事件可以让我捕捉到这种取消选择。

我想要的是针对复选框组值的 onChange 事件的解决方法，或者是一个 onCheck 事件，它不仅检测单选按钮何时被选中，而且未选中时也是如此。

我相信你们中的一些人以前遇到过这个问题。有哪些解决方法(或者理想情况下处理这个问题的正确方法是什么)？我只想捕捉更改事件，访问之前检查的 radio 以及新检查的 radio 。

附言
onClick 似乎是一个更好的(跨浏览器)事件来指示单选按钮何时被选中，但它仍然不能解决未选中的问题。

我认为为什么复选框类型的 onChange 在这种情况下确实有效是有道理的，因为它会在您选中或取消选中它时更改它提交的值。我希望单选按钮的行为更像 SELECT 元素的 onChange 但你能做什么......

Answer 1

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

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

这是一个 JSFiddle 演示:https://jsfiddle.net/crp6em1z/