反应本机单选按钮 - Javascript

本文介绍如何使用Javascript处理本机单选按钮的反应。

HTML代码

首先，需要在HTML中添加单选按钮的代码。例如：

<label>
  <input type="radio" name="gender" value="male">
  Male
</label>
<label>
  <input type="radio" name="gender" value="female">
  Female
</label>

这里创建了两个单选按钮，它们的值分别为"male"和"female"，它们都有相同的名称"gender"，所以它们在同一个组中。

Javascript代码

使用Javascript处理单选按钮需要使用事件监听器。通过添加事件监听器，我们可以在用户选择单选按钮时执行自定义代码。

const maleRadioButton = document.querySelector('input[value="male"]');
maleRadioButton.addEventListener('change', function() {
  console.log('Male is selected.');
});

const femaleRadioButton = document.querySelector('input[value="female"]');
femaleRadioButton.addEventListener('change', function() {
  console.log('Female is selected.');
});

这里使用了querySelector函数来选择单选按钮，然后使用addEventListener函数来添加change事件监听器。当单选按钮的状态发生改变时，这段代码就会打印出相应的文本信息。

结论

通过使用Javascript事件监听器，我们可以轻松处理本机单选按钮的反应。在网页开发中，单选按钮通常用于用户输入和表单提交等功能。通过对单选按钮的处理，我们可以更好地控制用户交互和数据处理。