单选按钮默认选中反应 - JavaScript

单选按钮是HTML表单中常用的元素之一，在表单提交前用户需要选择其中一个选项。默认情况下，单选按钮集合中的所有选项都是未选中的，当用户点击其中一个选项时，该选项会变为选中状态。但是，有时我们需要指定某个选项默认就是选中状态，本文将介绍如何使用JavaScript实现这个功能。

HTML代码

首先，我们需要编写一个包含若干个单选按钮的HTML代码：

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

上述代码中，我们创建了一个包含3个单选按钮的表单。它们的name属性都设置为"gender"，因此它们属于同一个单选按钮集合。同时，每个单选按钮都包含一个label标签，用于显示与之相对应的文本。

JavaScript代码

接下来，我们使用JavaScript实现用第二个单选按钮作为默认选中项。在这之前，我们需要了解一下单选按钮的相关属性：

• checked属性：用于获取或设置单选按钮是否选中。如果该属性的值为 true，则表示单选按钮被选中；否则，表示未选中。
• defaultChecked属性：用于获取或设置单选按钮是否默认选中。如果该属性的值为 true，则表示单选按钮默认被选中；否则，表示默认未选中。

我们可以在HTML中添加checked属性来指定默认选中的单选按钮，但如果我们希望动态设置某个单选按钮为默认选中状态，可以使用JavaScript来实现：

const femaleRadioButton = document.querySelector('input[value="female"]');
femaleRadioButton.defaultChecked = true;

如上述代码所示，我们首先使用document.querySelector()方法获取name属性为"gender"且value属性为"female"的单选按钮。然后，我们将它的defaultChecked属性设置为true，这样该单选按钮就成为了默认选中项。

结语

本文介绍了如何使用JavaScript实现单选按钮默认选中的功能。我们首先编写了一个包含若干个单选按钮的HTML代码，然后使用JavaScript代码设置了其中一个单选按钮为默认选中状态。这个功能可以应用于各种表单场景中，帮助提高用户体验。