javascript - 我可以通过单选组应用 'onchange' 事件吗

Question

这个问题已经有答案了:

OnChange event handler for radio button (INPUT type="radio") doesn't work as one value (19 个回答)

已关闭 7 年前。

我有点迷失在这里。

我有一些单选按钮，它们都具有相同的名称，因此它们被分组。

我无法解决的是，我还要应用什么更改事件？我无法获取 elementsByName，因为这会返回一个数组。

因此，与单选按钮通常一样，只能选择 1 个。我希望在更改时触发一个事件。

我的问题是，我是否必须向每个单选按钮应用一个事件，或者我可以按组应用“onchange”事件吗？

Answer 1

使用控制台查看它的运行情况，它按要求工作。诀窍是定位父级，然后比较单击的内容和被视为 currentTarget 的内容。

var fSet = document.querySelector("fieldset");
fSet.addEventListener("change", notify, false);

function notify(event) {
  if (event.target !== event.currentTarget) {
    var sRadio = event.target.id;
    console.log("The selected radio is: " + sRadio);
  }
  event.stopPropagation();
}

<fieldset>
  <legend>Radio Button onChange</legend>
  <input type="radio" id="a0" name="rGroup" checked="checked">
  <input type="radio" id="a1" name="rGroup">
  <input type="radio" id="a2" name="rGroup">
  <input type="radio" id="a3" name="rGroup">
  <input type="radio" id="a4" name="rGroup">
  <input type="radio" id="a5" name="rGroup">
  <input type="radio" id="a6" name="rGroup">
  <input type="radio" id="b0" name="rGroup">
  <input type="radio" id="b1" name="rGroup">
  <input type="radio" id="b2" name="rGroup">
  <input type="radio" id="b3" name="rGroup">
  <input type="radio" id="b4" name="rGroup">
  <input type="radio" id="b5" name="rGroup">
  <input type="radio" id="b6" name="rGroup">
</fieldset>