JavaScript 单选按钮 onchange

简介

JavaScript 单选按钮 onchange 是一种 JavaScript 事件类型，当单选按钮的选中状态变化时触发该事件。通过监听 onchange 事件，可以实现单选按钮的动态更新，从而实现与用户的交互。

使用方法

要使用 JavaScript 单选按钮 onchange 事件，需要将该事件与单选按钮绑定。具体步骤如下：

1. 在 HTML 中定义单选按钮

<input type="radio" name="gender" value="male" onchange="updateGender()">
<label for="male">Male</label>

<input type="radio" name="gender" value="female" onchange="updateGender()">
<label for="female">Female</label>

2. 在 JavaScript 中实现 onchange 事件处理函数

function updateGender() {
  var gender = document.querySelector('input[name="gender"]:checked').value;
  console.log("Gender: " + gender);
}

在这个例子中，我们定义了两个单选按钮，每一个都绑定了 onchange 事件，当用户选择其中一个单选按钮时，updateGender 函数就会被触发。

updateGender 函数通过 document.querySelector 方法获取当前被选中的单选按钮的值，并将该值输出到浏览器控制台中。

总结

JavaScript 单选按钮 onchange 事件是一种常见的表单交互方式，通过监听 onchange 事件，可以实现动态更新，进而实现与用户的交互。在实践中，我们需要将 onchange 事件与单选按钮绑定，并实现相应的事件处理函数来完成具体业务逻辑。