尝试设计表单时最重要的 HTML 组件之一是单选按钮。用户只能从单选按钮显示的选项中选择一个选项。
通常，我们只是利用 JavaScript 中元素的 value 属性从 HTML 网页中检索元素的值。但对于单选按钮，我们无法做到这一点。原因是获取各个单选按钮的值是一个坏主意。
让我们开始阅读本文，了解如何获取选定单选按钮的值。为此，我们将使用checked属性。
使用选中属性
检查的属性是布尔属性。如果存在，则表示在页面加载时应预先选择（选中） 元素。 Checked 属性可与复选框和单选输入类型一起使用。使用JavaScript，也可以在页面加载后修改checked属性。
立即学习“Java免费学习笔记（深入）”；
语法
以下是检查属性的语法 –
让我们看一些示例，以更好地了解如何获取所选单选按钮的值
示例
在下面的示例中，我们运行脚本来获取所选单选按钮的值。
AppMall应用商店
AI应用商店，提供即时交付、按需付费的人工智能应用服务
56 查看详情
document.getElementById("tutorial1").onclick = function () { var radioButtonGroup = document.getElementsByName("course"); var checkedRadio = Array.from(radioButtonGroup).find( (radio) => radio.checked ); alert("The Selected Course Was : " + checkedRadio.value); };Choose The Course
执行脚本时，它将生成一个由文本以及单选按钮和单击按钮组成的输出。当用户选择单选按钮并单击时，弹出窗口会显示您选择的值。
示例
考虑以下示例，我们运行脚本来获取所选单选按钮的值。
Choose Value And Click Submit Button
Choose: Login In Sign Up
function getvalue() { var ele = document.getElementsByName('Choose'); for(i = 0; i < ele.length; i++) { if(ele[i].checked) document.getElementById("result").innerHTML = "Choosen: "+ele[i].value; } }
运行上述脚本时，将弹出输出窗口，显示文本以及单选按钮和提交按钮。当用户选择单选按钮并单击提交按钮时，事件将被触发并显示所选值。
使用 querySelector() 函数
querySelector() 函数返回与给定选择器或选择器集匹配的文档的第一个元素。如果没有发现匹配，则返回 Null。
语法
以下是 querySelector() 的语法 –
querySelector(selectors)
示例
执行以下代码并观察我们如何获取所选单选按钮的值。
document.getElementById('click').onclick = function() { var selected = document.querySelector('input[type=radio][name=gender]:checked'); alert(selected.value); }Choose The Gender:
运行脚本时，它将生成一个由文本以及单选按钮和提交按钮组成的输出。当用户选择值并单击按钮时，会弹出一个窗口，显示所选值。
以上就是如何使用 JavaScript 获取选定单选按钮的值？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/536010.html
微信扫一扫 
支付宝扫一扫 
