如何在JavaScript中从单选框输入获取"unchecked"事件?

4
我注意到当元素被选中时,“change”事件只会触发一次事件。但是似乎在取消选中时不会触发任何事件,或者我错过了什么? 我想在“取消选中”时执行某些操作,但这从未触发。 理想情况下,我不希望将输入保存在数组中,并在更改时检查哪个已选中或未选中。 这里有一个例子,正如您所看到的,“做某事”从未被触发:

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

这似乎很基础...也许我忽略了什么? 谢谢!

这可能会有用,https://dev59.com/h2gu5IYBdhLWcg3wpYnJ - rishipuri
你想要的话,使用addEventListener("select", .....);会更好吗? - papakias
1
好的,所以如果我理解正确,在类型为单选框的输入元素状态从选中变为未选中时,实际上从来没有触发任何事件吗? - chitzui
1个回答

2

它只在targeted元素的时间进行验证,而不是与其他元素一起。最好使用For Each函数,它们可以验证所有元素的更改。

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 ,而 checkboxtoggle

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,