JavaScript clear 单选按钮

在 Web 开发中，我们常常需要为用户提供一些表单，如登录、注册、留言、评论等等。其中，单选按钮是一种常用的表单元素，用户可以从一个列表中选择一个选项，并将其值提交给后台处理。

但是，有时候用户在选择单选按钮时会出现误操作，他们选择了一个错误的选项，或者想要重新选择一个选项。这时，我们需要提供一种清除单选按钮选择的方法，让用户可以重新开始选择。

在本文中，我们将介绍使用 JavaScript 来清除单选按钮选择的方法。

HTML 单选按钮

我们先来看一下 HTML 中如何表示单选按钮。

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

以上代码表示了一个性别选择的单选按钮，其中 name 属性表示该单选按钮组的名称，多个单选按钮共享同一个名称就构成了一组按钮。value 属性表示该单选按钮的值，当用户选择这个按钮后，该值将被提交给后台处理。

清除单选按钮

回到我们的主题，如何清除单选按钮选择呢？其实很简单，只需要将单选按钮的 checked 属性设置为 false 即可。我们可以使用 JavaScript 来访问单选按钮元素，并设置其属性值。

const radioButtons = document.getElementsByName("gender");

for (const radioButton of radioButtons) {
  radioButton.checked = false;
}

以上代码获取了所有名称为 gender 的单选按钮元素，并将它们的 checked 属性设置为 false，从而清除了用户的选择。在实际应用中，可以根据实际情况来修改单选按钮的名称或者值。

总结

本文介绍了如何使用 JavaScript 清除单选按钮的选择。学习本文后，你已经掌握了清除单选按钮的方法，可以在你的表单开发中灵活运用。