单选按钮 onChange 事件 [重复]

Question

假设有两个单选按钮

<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() 函数。

Answer 1

您编写radio1 和radio2 的方式是不同的变量。因此，当您单击其中一个时，只有那个会发生变化。

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

Answer 2

这就是单选按钮的设计方式。根据the spec，在单选按钮组中的单选按钮上只会触发一个input 和change 事件。

MDN 表示这是另一种方式：

取决于要更改的元素类型和用户的方式 与元素交互时，change 事件会在不同的位置触发 时刻：

• 当元素为:checked（通过单击或使用键盘）时 <input type="radio"> 和 <input type="checkbox">;

Answer 3

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

1. 单选按钮 - 选中
2. 复选框 - 选中或取消选中
3. 文本 - 插入或删除字符

Answer 4

这可以通过 javascript 实现，而无需在输入标签中添加 onchange 属性。只需通过循环运行元素列表并使用关键字 this。确保每个输入都有相同的选择器，我在示例中使用了类...

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

var matches = document.querySelectorAll('.chngRadio');

for (match in matches) {
  matches[match].onchange = function() {
    console.log(this.value)
  }
}

<div>
  <input type="radio" class="chngRadio" name="radio" value="val1">
  <label for="val1">val1</label>
  <input type="radio" class="chngRadio" name="radio" value="val2">
  <label for="val2">val2</label>
  <input type="radio" class="chngRadio" name="radio" value="val3">
  <label for="val3">val3</label>
  <input type="radio" class="chngRadio" name="radio" value="val4">
  <label for="val4">val4</label>

</div>