javascript - 如何在 radio 输入上添加 eventListener

Question

我有这段代码，它工作正常，但在 document.myform.onchange 的第一瞬间，我尝试了 document.myform.elem.onclick 并且最后的代码没有想要工作，只有当我把它放在表格上时，它才会起作用，为什么会这样？

<form name="myform">
            <input type="radio" name="car" value="audi">audi<br>
            <input type="radio" name="car" value="bmw">bmw
            <div id="text">some text is here</div>
 </form>

function ready() {
    var elem = document.getElementsByName("car");
    var hid = document.getElementById("text");
    var i;

    document.myform.onchange = function() {
       for (i = 0; i < elem.length; i++) {
            if (elem[0].checked == true) {
                hid.style.display = "none";
            } else {
                hid.style.display = "block";
            }
        } 
    }
}

document.addEventListener("DOMContentLoaded", ready);

Answer 1

• 通过 radio 按钮(循环)注册 change 事件而不是 form
• 不处理 radio-input 的 index，而是检查选中的单选按钮的值

function ready() {
  var elem = document.getElementsByName("car");
  var hid = document.getElementById("text");
  for (var i = 0; i < elem.length; i++) {
    elem[i].onchange = function() {
      if (this.value === 'audi') {
        hid.style.display = "none";
      } else {
        hid.style.display = "block";
      }
    }
  }
}

document.addEventListener("DOMContentLoaded", ready);

<form name="myform">
  <input type="radio" name="car" value="audi">audi
  <br>
  <input type="radio" name="car" value="bmw">bmw
  <div id="text">some text is here</div>
</form>