单选按钮是 HTML 表单中常见的元素，但有时候我们需要清除用户已经选择的值。本文将介绍如何使用 Javascript 清除单选按钮的选中状态。
单选按钮的基本用法
<form> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> </form>
以上代码创建了两个单选按钮，它们都属于同一个 name 属性组，因此只能选其中一个。
清除单选按钮的选中状态
要清除单选按钮的选中状态，我们需要使用 checked 属性。如果该属性为 true，则表示该单选按钮当前被选中。如果该属性为 false，则表示该单选按钮未被选中。
以下是清除单选按钮选中状态的两种方法：
方法一：设置 checked 属性为 false
document.querySelector('input[name="gender"][value="male"]').checked = false;
document.querySelector('input[name="gender"][value="female"]').checked = false;以上代码分别获取了两个单选按钮，并将它们的 checked 属性设置为 false。
方法二：重置整个表单
document.querySelector('form').reset();以上代码会重置整个表单，包括所有输入元素（如文本框、下拉列表和单选按钮）的值和状态。这种方法会把所有单选按钮都清除选中状态，因此只有在需要重置整个表单时才使用。
示例代码
以下是一个完整的示例代码，演示如何使用 Javascript 清除单选按钮的选中状态：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ----- ------ -- ------------------
-------
------
------
------ ------------ ------------- ------------- --------
------ ------------ ------------- --------------- ----------
-------
------- ---------------------------- ----- ---------------
--------
-------- ------------ -
-------------------------------------------------------------------- - ------
---------------------------------------------------------------------- - ------
-
---------
-------
-------以上代码创建了一个包含两个单选按钮和一个“Clear Radio Button”按钮的表单。当用户单击“Clear Radio Button”按钮时，会调用 clearRadio() 函数，该函数会清除两个单选按钮的选中状态。
结论
通过本文的介绍，我们学习了如何使用 Javascript 清除单选按钮的选中状态。这些知识可供前端开发者使用，提高表单操作的灵活性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26177