如何从 JavaScript 中的无线电输入中获取“未检查”事件？答案

【问题标题】：How to get "unchecked" event from radio input in JavaScript?如何从 JavaScript 中的无线电输入中获取“未检查”事件？
【发布时间】：2017-10-10 04:20:38
【问题描述】：

我注意到“更改”事件仅在检查元素时触发一个事件。但未选中时似乎不会触发任何事件，还是我错过了什么？

我想对“取消选中”做一些事情，但这永远不会触发。

理想情况下，我确实不希望将输入保存在数组中，并在更改时检查是否检查了哪个输入。

这是一个例子，你可以看到，“做某事”永远不会被解雇：

document.querySelector("input").addEventListener("change", function(ev) {
  	console.log(ev.target.checked);
    if(!ev.target.checked) console.log("do something");
});

<input type="radio" name="type" checked="checked" value="guest" />
<input type="radio" name="type" value="walk_in" />

这似乎很基本......也许我忽略了一些东西？谢谢！

【问题讨论】：

这可能有用，stackoverflow.com/questions/11173685/…
可以添加EventListener("select", .....);为你想要的更好？
好的，所以如果我没看错的话，当元素状态在 Radio 类型的输入上从选中变为未选中时，实际上永远不会触发事件？？

标签： javascript html forms input radio-button

【解决方案1】：

它仅在 targeted 元素时验证，而不是与其他元素一起验证。更好地用于他们验证所有元素更改的每个函数

document.querySelectorAll("input").forEach(function(a) {
      a.addEventListener("change", function() {
        console.log(this.checked);
         console.log("checked radio value="+this.value);
        if (!this.checked) console.log("do something");
      })
    })

<input type="radio" name="type" checked="checked" value="guest" />
<input type="radio" name="type" value="walk_in" />

或者，如果您需要验证检查和取消检查*（如切换）*，请使用 type=checkbox 而不是 radio。

Radio 按钮没有toggle 复选框有toggle

document.querySelector("input").addEventListener("change", function(ev) {
  console.log(ev.target.checked);
  if (!ev.target.checked) console.log("do something");
});

<input type="checkbox" name="type" checked="checked" value="guest" />
<input type="checkbox" name="type" value="walk_in" />

【讨论】：