通常，我们只是利用 javascript 中元素的 value 属性从 html 网页中检索元素的值。但对于单选按钮，我们无法做到这一点。原因是获取各个单选按钮的值是一个坏主意。
让我们开始阅读本文，了解如何获取选定单选按钮的值。为此，我们将使用checked属性。
使用选中属性检查的属性是布尔属性。如果存在，则表示在页面加载时应预先选择（选中） 元素。 checked 属性可与复选框和单选输入类型一起使用。使用javascript，也可以在页面加载后修改checked属性。
语法以下是检查属性的语法 -
<input checked>
让我们看一些示例，以更好地了解如何获取所选单选按钮的值
示例在下面的示例中，我们运行脚本来获取所选单选按钮的值。
<!doctype html><html> <body style=background-color:#eafaf1 > <center> <div id=tutorial> <p>choose the course</p> <div> <input type=radio id=java name=course value=java /> <label for=java>java</label> <input type=radio id=html name=course value=html /> <label for=html>html</label> </div> <button id=tutorial1>click</button> </div> </center> <script> 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); }; </script> </body></html>
执行脚本时，它将生成一个由文本以及单选按钮和单击按钮组成的输出。当用户选择单选按钮并单击时，弹出窗口会显示您选择的值。
示例考虑以下示例，我们运行脚本来获取所选单选按钮的值。
<!doctype html><html> <body style=text-align:center;background-color:#d2b4de;> <p> choose value and click submit button </p> choose: <input type=radio name=choose value=login>login in <input type=radio name=choose value=signup>sign up <br> <button type=button onclick=getvalue()> submit </button> <br> <div id=result></div> <script> 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; } } </script> </body></html>
运行上述脚本时，将弹出输出窗口，显示文本以及单选按钮和提交按钮。当用户选择单选按钮并单击提交按钮时，事件将被触发并显示所选值。
使用 queryselector() 函数queryselector() 函数返回与给定选择器或选择器集匹配的文档的第一个元素。如果没有发现匹配，则返回 null。
语法以下是 queryselector() 的语法 -
queryselector(selectors)
示例执行以下代码并观察我们如何获取所选单选按钮的值。
<!doctype html><html> <body style=text-align:center;background-color:#d6eaf8 ;> <div id=tutorial> <p>choose the gender:</p> <div> <input type=radio id=male name=gender value=male> <label for=male>male</label> <input type=radio id=female name=gender value=female> <label for=female>female</label> <input type=radio id=others name=gender value=others> <label for=others>others</label> </div> <button id=click>submit</button> </div> <script> document.getelementbyid('click').onclick = function() { var selected = document.queryselector('input[type=radio][name=gender]:checked'); alert(selected.value); } </script> </body></html>
运行脚本时，它将生成一个由文本以及单选按钮和提交按钮组成的输出。当用户选择值并单击按钮时，会弹出一个窗口，显示所选值。
以上就是如何使用 javascript 获取选定单选按钮的值？的详细内容。