javascript - 单选按钮的OnChange事件处理程序（INPUT type =“ radio”）不能作为一个值使用(OnChange event handler for radio button (INPUT type=“radio”) doesn't work as one value)

Question

I'm looking for a generalized solution for this.

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

Consider 2 radio type inputs with the same name.

(考虑2个具有相同名称的无线电类型输入。)

When submitted, the one that is checked determines the value that gets sent with the form:

(提交后，选中的将确定以以下形式发送的值：)

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

The change event does not fire when a radio button is de-selected.

(取消选择单选按钮时，更改事件不会触发。)

So if the radio with value="1" is already selected and the user selects the second, handleChange1() does not run.

(因此，如果已经选择了值=“ 1”的单选按钮，并且用户选择了第二个，则handleChange1（）不会运行。)

This presents a problem (for me anyway) in that there is no event where I can can catch this de-selection.

(（无论如何对我来说）这带来了一个问题，因为没有任何事件可以使我取消选择。)

What I would like is a workaround for the onchange event for the checkbox group value or alternatively an oncheck event that detects not only when a radio is checked but also when it is unchecked.

(我想要的是一种针对复选框组值的onchange事件或一种oncheck事件的变通方法，该事件不仅可以检查无线电是否已选中，还可以在未选中无线电时对其进行检测。)

I'm sure some of you have run into this problem before.

(我敢肯定你们当中有些人曾经遇到过这个问题。)

What are some workarounds (or ideally what is the right way to handle this)?

(有哪些解决方法（或者理想情况下是正确的处理方式）？)

I just want to catch the change event, access the previously checked radio as well as the newly checked radio.

(我只想捕捉更改事件，访问先前检查的收音机以及新检查的收音机。)

PS

(聚苯乙烯)

onclick seems like a better (cross-browser) event to indicate when a radio is checked but it still does not solve the un-checked problem.

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

I suppose it makes sense why onchange for a checkbox type does work in a case like this since it changes the value that it submits when you check or un-check it.

(我认为这对为什么在这种情况下onchange的复选框类型有效的原因是有道理的，因为它会更改在您选中或取消选中它时提交的值。)

I wish the radio buttons behaved more like a SELECT element's onchange but what can you do...

(我希望单选按钮的行为更像是SELECT元素的onchange，但是您该怎么办...)

  ask by Matthew translate from so

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> 

Here's a JSFiddle demo: https://jsfiddle.net/crp6em1z/

(这是一个JSFiddle演示： https ：//jsfiddle.net/crp6em1z/)