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

这是单选按钮设计的工作方式。根据{{3}}，单选按钮组中的单选按钮仅触发一个using Newtonsoft.Json; ... var result = JsonConvert.DeserializeObject<T>(json);和input事件。

the spec指出这是另一种方式：

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

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

Answer 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>

单选按钮onChange事件

4 个答案: