数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 获取选中单选按钮的值？
在尝试设计表单时，单选按钮是最重要的 HTML 组件之一。用户只能从单选按钮显示给他的选项中选择一个。
通常，我们只需在 JavaScript 中使用元素的 value 属性从 HTML 网页中检索元素的值。但是对于单选按钮，我们不能这样做。原因是获取单个单选按钮的值不是一个好主意。
让我们开始本文，学习如何获取选中的单选按钮的值。为此，我们将使用 checked 属性。
使用 checked 属性
checked 属性是一个布尔属性。如果存在，则表示当页面加载时，应预先选中（选中）<input> 元素。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>
当脚本运行时，它将生成一个包含文本以及单选按钮和提交按钮的输出。当用户选择值并点击按钮时，一个弹出窗口显示所选内容。
更新于: 2023年4月20日
6K+ 浏览量
广告