📅 最后修改于: 2023-12-03 15:27:02.657000 🧑 作者: Mango
单选按钮常用于让用户在几个选项中选择一个，但是有时我们需要清除用户的选择。本文将介绍如何使用 JavaScript 清除单选按钮的选择。
我们需要先创建一组单选按钮，例如：
<form>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form>
其中，name 属性的值必须相同，这样它们才能被视为一组单选按钮。
我们可以使用 JavaScript 来清除单选按钮的选择。我们可以通过设置 checked 属性为 false 来清除它们的选择。
const radios = document.getElementsByName('gender');
for (let i = 0; i < radios.length; i++) {
radios[i].checked = false;
}
在上述代码中，我们首先使用 document.getElementsByName('gender') 获取单选按钮组，然后使用 for 循环迭代每个单选按钮，并将它们的 checked 属性设置为 false，从而清除它们的选择。
<!DOCTYPE html>
<html>
<head>
<title>Clear Radio Button Selection - JavaScript</title>
</head>
<body>
<form>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form>
<button onclick="clearRadio()">Clear Selection</button>
<script>
function clearRadio() {
const radios = document.getElementsByName('gender');
for (let i = 0; i < radios.length; i++) {
radios[i].checked = false;
}
}
</script>
</body>
</html>
以上是在 HTML 中使用 JavaScript 清除单选按钮选择的完整代码。当用户单击 Clear Selection 按钮时，我们将使用 clearRadio() 函数清除单选按钮的选择。