如何检测RadioNodeList的值变化?

问题描述 投票:2回答:1

使用带有my_form的一组单选按钮的形式name=my_radio,我可以使用RadioNodeList获得my_form.elements.my_radio对象。我可以使用该对象的value属性获取当前所选按钮的值,如果我将字符串分配给value属性,则所选选项会根​​据需要进行更改。

我希望能够做my_form.elements.my_radio.addEventListener('change', ...,听取价值变化(通过用户选择不同的选项),但它没有这样的方法。

如何检测值的变化?

是在每个单独的单选按钮对象上设置事件侦听器的唯一方法吗?

var my_form = document.querySelector('#my_form');
var my_radio = my_form.elements.my_radio;

// This fails since RadioNodeList has no addEventListener function
/*
my_radio.addEventListener('change', function () {
console.log("Value changed; new value is " + my_radio.value);
});
*/

// The following works, but is there a better way, such as with a single event listener?
for (var i = 0, l = my_radio.length; i < l; i++) {
my_radio[i].addEventListener('change', function () {
	console.log("Value changed; new value is " + my_radio.value);
});
}
<form id=my_form>
<div>
	<label>
		<input type=radio name=my_radio value=value_1>
		Value 1
	</label>
</div>
<div>
	<label>
		<input type=radio name=my_radio value=value_2>
		Value 2
	</label>
</div>
<div>
	<label>
		<input type=radio name=my_radio value=value_3>
		Value 3
	</label>
</div>
<div>
	<label>
		Some other field where I don't need to detect changes
		<input name=some_other_field>
	</label>
</div>
</form>
javascript
1个回答
0
投票

你可以试试这个:

my_form.addEventListener('change', function () {
console.log("Value changed; new value is " + my_radio.value);
});
© www.soinside.com 2019 - 2024. All rights reserved.