如何在无线电输入上添加事件侦听器

how to add eventListener on radio inputs

本文关键字：添加 事件 侦听器 输入 无线电      更新时间：2023-09-26

我有这段代码，它可以正常工作，但是在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);
  • 通过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>

嗨，

您可以从这些例子中得到启发，祝你好运

<form name="myForm">
                <input type="radio" name="car"  value="1" />
                <input type="radio" name="car"  value="2" />
            </form>
    <script>
    var rad = document.myForm.car;
    var prev = null;
    for(var i = 0; i < rad.length; i++) {
        rad[i].onclick = function() {
            (prev)? console.log(prev.value):null;
            if(this !== prev) {
                prev = this;
            }
            console.log(this.value)
        };
    }
    </script>

您可以将change事件附加到无线电输入，如下所示：

function ready() {
    var radioInputs = document.myform.car,
        hid = document.getElementById("text");
    for(var i = 0; i < radioInputs.length; i++){
        radioInputs[i].onchange = function() {
            hid.style.display = radioInputs[0].checked ? 'block' : 'none';
        };
    }
}
document.addEventListener("DOMContentLoaded", ready);


function ready() {
	var radioInputs = document.myform.car,
        hid = document.getElementById("text");
	for(var i = 0; i < radioInputs.length; i++){
    	radioInputs[i].onchange = function() {
       		hid.style.display = radioInputs[0].checked ? 'block' : 'none';
    	};
    }
}
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>

相关文章：