如何在 Javascript 中清除单选按钮?

单选按钮是 HTML 表单中常见的元素,但有时候我们需要清除用户已经选择的值。本文将介绍如何使用 Javascript 清除单选按钮的选中状态。

单选按钮的基本用法

------
  ------ ------------ ------------- ------------- --------
  ------ ------------ ------------- --------------- ----------
-------

以上代码创建了两个单选按钮,它们都属于同一个 name 属性组,因此只能选其中一个。

清除单选按钮的选中状态

要清除单选按钮的选中状态,我们需要使用 checked 属性。如果该属性为 true,则表示该单选按钮当前被选中。如果该属性为 false,则表示该单选按钮未被选中。

以下是清除单选按钮选中状态的两种方法:

方法一:设置 checked 属性为 false

-------------------------------------------------------------------- - ------
---------------------------------------------------------------------- - ------

以上代码分别获取了两个单选按钮,并将它们的 checked 属性设置为 false

方法二:重置整个表单

---------------------------------------

以上代码会重置整个表单,包括所有输入元素(如文本框、下拉列表和单选按钮)的值和状态。这种方法会把所有单选按钮都清除选中状态,因此只有在需要重置整个表单时才使用。

示例代码

以下是一个完整的示例代码,演示如何使用 Javascript 清除单选按钮的选中状态:

--------- -----
------
------
  ----- ----------------
  ------------ ----- ------ -- ------------------
-------
------
  ------
    ------ ------------ ------------- ------------- --------
    ------ ------------ ------------- --------------- ----------
  -------

  ------- ---------------------------- ----- ---------------

  --------
    -------- ------------ -
      -------------------------------------------------------------------- - ------
      ---------------------------------------------------------------------- - ------
    -
  ---------
-------
-------

以上代码创建了一个包含两个单选按钮和一个“Clear Radio Button”按钮的表单。当用户单击“Clear Radio Button”按钮时,会调用 clearRadio() 函数,该函数会清除两个单选按钮的选中状态。

结论

通过本文的介绍,我们学习了如何使用 Javascript 清除单选按钮的选中状态。这些知识可供前端开发者使用,提高表单操作的灵活性和用户体验。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/26177