如何使用JavaScript/jQuery取消选中单选按钮？

有时，我们需要使用 JavaScript 或 JQuery 取消选中单选按钮。例如，我们在表单中使用单选按钮。当用户按下清除表单按钮时，我们需要取消选中所有单选按钮，并再次允许用户从单选按钮中选择任何选项。

在本教程中，我们将学习使用 JQuery 或 JavaScript 取消选中单个或多个单选按钮的各种方法。

使用 JavaScript 取消选中单选按钮

我们可以使用 id、标签、名称或其他方式访问 JavaScript 中的单选按钮。之后，我们可以通过分配 false 布尔值来取消选中单选按钮的选中属性。

语法

用户可以按照下面的语法使用checked属性取消选中单选按钮。

立即学习“Java免费学习笔记（深入）”；

radio.checked = false; 

在上面的语法中，radio 是使用 JavaScript 访问的单选按钮。

示例 1

在下面的示例中，我们创建了单选按钮。用户可以通过单击单选按钮来检查该单选按钮。之后，当用户单击该按钮时，它将调用clearRadio()函数。

在clearRadio()函数中，我们使用无线电输入的id来访问它。接下来，我们访问单选输入的 selected 属性并分配一个 false 布尔值以取消选中单选按钮。

   
 Using the  Checked property of radio button  to uncheck radio button in JavaScript. 
   

    Test 
   
   
 

    Uncheck Radio 
   
 

   

在上面的输出中，用户可以观察到只要按下“取消选中单选”按钮，就会清除单选输入。

Artbreeder

创建令人惊叹的插画和艺术

下载

使用 JQuery 取消选中单选按钮

我们还可以使用JQuery来清除无线电输入。在 JQuery 中，我们可以使用 prop() 方法为 HTML 元素设置任何属性。 prop() 方法采用两个值作为参数：属性名称和属性值。

在这里，我们将传递“checked”作为属性名称和 false 作为属性值，以使用 JQuery 取消选中特定的单选按钮。

语法

用户可以按照以下语法使用 JQuery 的 prop() 方法取消选中单选按钮。

$("#radio_btn").prop('checked', false); 

在上面的语法中，我们将“checked”属性名称作为第一个参数传递，将 false 属性值作为第二个参数传递。

示例 2

在下面的示例中，我们创建了一个单选按钮。当按钮上触发单击事件时，它将通过使用 prop() 方法为选中的属性设置 false 值来清除单选按钮。

   


   
 Using the  prop() method  to uncheck radio button in JQuery
    Clear 
   
   
 

    Uncheck Radio 
   
 

   

示例 3

我们在下面的示例中创建了多个无线电输入并将它们分组。因此，用户可以从所有四个无线电输入中选择任何一个。当用户单击该按钮时，它将清除所有无线电输入。

在这里，我们通过类型和名称访问了无线电输入。因此，即使用户从组中选择了任何无线电输入，它也会取消选中它。

   


   
 Using  jQuery  to clear multiple radio buttons 
    Blue 
   
    Black 
   
    Brown 
   
    Green 
   
   
 

    Clear all radio buttons 
   
 

   

我们学会了在需要时使用 JavaScript 和 jQuery 清除无线电输入。另外，当用户提交表单时，有必要清除无线电输入。用户可以通过单选按钮的类型和名称访问单选按钮组，然后清除单个组的所有单选按钮。