如何使用 OnChange 事件跟踪取消选择的单选按钮值？

单选按钮值中 OnChange 事件的解决方法

使用同名单选按钮时，您可能会遇到 onChange 事件的限制取消选择单选按钮时不会触发。这可能会给跟踪先前选择的值带来困难。

解决方案

要克服这个问题，您可以使用多种技术的组合：

1. 迭代单选按钮：使用 JavaScript 迭代所有同名的单选按钮。
2. 更改事件监听器：为更改事件添加事件监听器到每个单选按钮。
3. 上一个单选： 在事件侦听器外部初始化变量 prev，以最初存储空值。

4. 内事件监听器： 在事件监听器中，会发生以下操作：

   • 如果存在 prev 值，则将其值记录到控制台。
   • 将 prev 值更新为当前单选按钮。
   • 将当前单选按钮的值记录到控制台。

代码示例：

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

示例表格：

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

附加说明：

• 此方法允许您跟踪先前选择的和新选择的单选按钮值。
• 这个概念可以扩展到处理多组单选按钮。

以上是如何使用 OnChange 事件跟踪取消选择的单选按钮值？的详细内容。更多信息请关注PHP中文网其他相关文章！