极客笔记JavaScript 如何获取选定单选按钮的值
在设计表单时，单选按钮是最重要的HTML组件之一。用户只能从单选按钮中显示的选项中选择一个。
通常情况下，我们可以使用JavaScript中元素的value属性来获取HTML网页中元素的值。但是对于单选按钮，我们不能这样做。原因是获取单独单选按钮的值是不可取的。
让我们开始学习如何获取已选单选按钮的值。为此，我们将使用checked属性。
使用checked属性
checked属性是一个布尔属性。当存在时，它表示在页面加载时应预先选择（选中）一个元素。checked属性可用于复选框和单选按钮输入类型。使用JavaScript，可以在页面加载后修改checked属性。
语法
以下是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>
当脚本运行时，它将生成一个文本输出，其中包含一个单选按钮和一个提交按钮。当用户选择值并单击按钮时，将弹出一个显示所选择项的窗口。