尝试设计表单时最重要的 HTML 组件之一是单选按钮。用户只能从单选按钮显示的选项中选择一个选项。
通常，我们只是利用 JavaScript 中元素的 value 属性从 HTML 网页中检索元素的值。但对于单选按钮，我们无法做到这一点。原因是获取各个单选按钮的值是一个坏主意。
让我们开始阅读本文，了解如何获取选定单选按钮的值。为此，我们将使用checked属性。
使用选中属性
检查的属性是布尔属性。如果存在，则表示在页面加载时应预先选择（选中） 元素。 Checked 属性可与复选框和单选输入类型一起使用。使用JavaScript，也可以在页面加载后修改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 获取选定单选按钮的值？的详细内容。更多信息请关注PHP中文网其他相关文章！
