javascript - 如何使用它们的 `change` 事件保持输入的先前状态？

Question

我有两个单选按钮输入，当其中一个被点击时，它会被检查并提醒用户他或她是否要提交输入。根据用户的日志历史记录，可以预先检查其中任何一个。

问题是这样的:当用户单击警告对话框的取消按钮时，我想恢复 radio 输入的选中状态。

如果事件 change 通过了 pre-change status 和 post-change status，这将很容易实现，但似乎没有。

有什么方法可以在输入的 change 事件中记录输入的先前状态？

Answer 1

您可以存储对 radio 的 RadioNodeList 的引用，还可以存储当前值。

当 change 事件监听器被触发时，您可以更新存储的值，或者通过将旧值分配为 value 属性来撤消更改。

假设所有 radio 具有不同的值，这将起作用。

var form = document.forms[0],
    els = form.elements.myradio,
    val = els.value;
form.addEventListener('change', function(e) {
  if(confirm('Do you want to change?'))
    val = els.value; // Update the value
  else
    els.value = val; // Undo (assign the old value)
});

<form>
  <label><input type="radio" name="myradio" value="1" checked />1</label>
  <label><input type="radio" name="myradio" value="2" />2</label>
  <label><input type="radio" name="myradio" value="3" />3</label>
</form>