单选按钮的OnChange事件处理程序（INPUT type =“ radio”）不能用作一个值

小编典典

单选按钮的OnChange事件处理程序（INPUT type =“ radio”）不能用作一个值

html

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

考虑2个具有相同名称的无线电类型输入。提交后，选中的将确定以以下形式发送的值：

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

取消选择单选按钮时，更改事件不会触发。因此，如果已经选择了值=“
1”的单选按钮，并且用户选择了第二个，则handleChange1（）不会运行。这（无论如何对我而言）带来了一个问题，因为没有任何事件可以使我取消选择。

我想要的是一个针对复选框组值的onchange事件或一个oncheck事件的变通办法，该事件不仅可以检查无线电是否选中，还可以不选中无线电。

我敢肯定你们当中有些人曾经遇到过这个问题。有哪些解决方法（或者理想情况下是正确的处理方式）？我只想捕捉更改事件，访问以前检查过的收音机以及新检查过的收音机。

PS
onclick似乎是一个更好的（跨浏览器）事件，用于指示何时选中某个收音机，但仍不能解决未选中的问题。

我认为这对于在这种情况下为什么onchange的复选框类型起作用是有道理的，因为它会更改您在选中或取消选中它时提交的值。我希望单选按钮的行为更像是SELECT元素的onchange，但是您该怎么办…

阅读 864

2020-05-10

共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/

2020-05-10