Javascript 单选按钮onChange事件

让我们假设我们有两个单选按钮

<input type="radio" value="val1" name="radio1" onChange="change()"/>
<input type="radio" value="val2" name="radio1" onChange="change()" />

现在，如果单击任何单选按钮，将执行change（）函数。

---

所以，我的问题是假设radio1被选中，并且如果radio2被选中，那么change（）函数只执行一次。这里radio1的值也在改变，radio2也在改变。为什么change（）函数不会执行两次呢。

编写radio1和radio2的方式是不同的变量。所以当你点击其中一个时，只有一个在改变

---

但是，如果在单击其中一个按钮时将它们都重命名为radio1，则只有radio1会更改，因为没有其他变量。

这就是单选按钮的工作原理。根据，仅对单选按钮组中的单选按钮触发单个

输入

和

更改

事件

表示这是另一种方式：

---

取决于要更改的元素类型和用户的方式 与元素交互时，

change

事件以不同的方式激发 时刻：

• 当元素为

  时：通过单击或使用键盘选中
  和
  
  

---

根据要更改的元素的类型以及用户与元素交互的方式，更改事件会在不同的时刻触发。 例如：-

单选按钮-打开选择

复选框-选中或取消选中时

文本-插入或删除字符时

---

这可以通过javascript实现，而不需要输入标记中的

onchange

属性。只需在循环中运行元素列表并使用关键字this。确保每个输入都有相同的选择器，我在示例中使用类

下面我使用

querySelectorAll（）

定义元素，并为每个单选按钮添加了一个类。然后，我通过for循环运行元素列表，并在javascriot中将onchange事件应用于元素。然后，要获取用户正在更改为的唯一值，请使用

this.value

获取值

var matches=document.querySelectorAll（'.chngRadio'）；
for（比赛中的比赛）{
匹配[match].onchange=函数（）{
console.log（this.value）
}
}

瓦尔1
瓦尔2
val3
瓦尔4

这看起来像是一个非常类似的问题，因为当单选按钮被取消选中时，更改事件不会触发，只有当它被选中时才会触发。我知道，看起来很奇怪，因为它已经“改变”了，但这就是onChange（）的本质。这对你有帮助