
尝试设计表单时最重要的 HTML 组件之一是单选按钮。用户只能从单选按钮显示的选项中选择一个选项。
通常,我们只是利用 JavaScript 中元素的 value 属性从 HTML 网页中检索元素的值。但对于单选按钮,我们无法做到这一点。原因是获取各个单选按钮的值是一个坏主意。
让我们开始阅读本文,了解如何获取选定单选按钮的值。为此,我们将使用checked属性。
使用选中属性
检查的属性是布尔属性。如果存在,则表示在页面加载时应预先选择(选中) 元素。 Checked 属性可与复选框和单选输入类型一起使用。使用JavaScript,也可以在页面加载后修改checked属性。
立即学习“Java免费学习笔记(深入)”;
语法
以下是检查属性的语法 -
让我们看一些示例,以更好地了解如何获取所选单选按钮的值
示例
在下面的示例中,我们运行脚本来获取所选单选按钮的值。
执行脚本时,它将生成一个由文本以及单选按钮和单击按钮组成的输出。当用户选择单选按钮并单击时,弹出窗口会显示您选择的值。
示例
考虑以下示例,我们运行脚本来获取所选单选按钮的值。
Choose Value And Click Submit Button
Choose:
Login In
Sign Up
运行上述脚本时,将弹出输出窗口,显示文本以及单选按钮和提交按钮。当用户选择单选按钮并单击提交按钮时,事件将被触发并显示所选值。
使用 querySelector() 函数
querySelector() 函数返回与给定选择器或选择器集匹配的文档的第一个元素。如果没有发现匹配,则返回 Null。
语法
以下是 querySelector() 的语法 -
querySelector(selectors)
示例
执行以下代码并观察我们如何获取所选单选按钮的值。
Choose The Gender:
运行脚本时,它将生成一个由文本以及单选按钮和提交按钮组成的输出。当用户选择值并单击按钮时,会弹出一个窗口,显示所选值。











