如何使用 JavaScript 检查单选按钮是否被选中？
在 HTML 中，单选按钮允许开发人员为选择创建多个选项。用户可以选择任意一个选项，我们可以获取其值并了解用户在多个选项中选择了哪个选项。
因此，检查用户选择哪个单选按钮以了解他们从多个选项中做出的选择非常重要。让我们通过现实生活中的例子来理解它。当您填写任何表格并要求选择性别时，您可以看到他们给您三个选项，而您只能选择一个。
在本教程中，我们将学习两种使用 JavaScript 检查单选按钮是否被选择的方法。
使用单选按钮的checked属性
我们可以使用各种方法访问 JavaScript 中的 radio 元素。之后，我们可以使用其checked属性来检查所选单选按钮是否被选中。如果checked属性的值为true，则表示该单选按钮被选中；否则不被选中。
语法
用户可以按照以下语法使用radio元素的checked属性检查radio按钮是否被选中。
<input type = "radio" name = "radio" value = "male" id = "radio1" > Male</input>
<script>
let radio1 = document.getElementById('radio1');
if(radio1.checked){
// radio1 is checked
}
</script>
在上面的语法中，我们使用单选按钮的 id 访问单选按钮，并使用 checked 属性来检查 if 语句中是否选择了单选按钮。
示例
在下面的示例中，我们创建了三个包含不同值的单选按钮，例如男性、女性等。在 JavaScript 中，我们通过 ID 访问每个单选按钮，并检查每个单选按钮的“checked”属性的值。
当用户选择任何单选按钮并单击该按钮时，他们会看到一条消息，显示所选单选按钮的值。
<html>
<body>
<h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected.</h3>
<input type = "radio" name = "radio" value = "male" id = "radio1" > Male </input> <br>
<input type = "radio" name = "radio" value = "female" id = "radio2" > Female </input><br>
<input type = "radio" name = "radio" value = "other" id = "radio3" /> Other </input>
<p id = "output"> </p>
<button onclick = "checkRadio()"> Check radio </button>
<script>
let output = document.getElementById("output");
function checkRadio(){
// accessing the radio buttons
let radio1 = document.getElementById('radio1');
let radio2 = document.getElementById('radio2');
let radio3 = document.getElementById('radio3');
// checking if any radio button is selected
if(radio1.checked){
output.innerHTML = "The radio button with value " + radio1.value + " is checked!";
}
if(radio2.checked){
output.innerHTML = "The radio button with value " + radio2.value + " is checked!";
}
if(radio3.checked){
output.innerHTML = "The radio button with value " + radio3.value + " is checked!";
}
}
</script>
</body>
</html>
示例
下面的示例与上面的示例几乎相同，但不同之处在于我们一次使用其名称访问所有单选按钮。 getElementByName() 方法返回所有名为 radio 的单选元素。
之后，我们使用 for-of 循环遍历单选按钮数组，并使用“checked”属性检查每个单选按钮是否被选中。
<html>
<body>
<h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected</h3>
<input type = "radio" name = "radio" value = "10" id = "radio1"> 10 </input> <br>
<input type = "radio" name = "radio" value = "20" id = "radio2"> 20 </input> <br>
<input type = "radio" name = "radio" value = "30" id = "radio3" /> 30 </input>
<p id = "output"> </p>
<button onclick = "getSelectedRadio()"> Check radio </button>
<script>
let output = document.getElementById("output");
function getSelectedRadio() {
let radioButtons = document.getElementsByName('radio');
for (let radio of radioButtons) {
if (radio.checked) {
output.innerHTML = "The radio button is selected and it's value is " + radio.value;
}
}
}
</script>
</body>
</html>
使用querySelector()方法检查单选按钮是否被选中
程序员可以使用 JavaScript 的 querySelector() 方法来选择任何 HTML 元素。在这里，我们使用 querySelector() 方法仅选择选中的单选按钮。如果没有选择单选按钮，则返回空值。
语法
用户可以按照下面的语法使用querySelector()方法来检查单选按钮是否被选中。
var selected = document.querySelector('input[name="year"]:checked');
在上面的语法中，“year”是单选按钮组的名称，它返回属于“year”组并被选中的任何单选按钮。
示例
在下面的示例中，我们创建了三个单选按钮，为用户提供三种不同的选择。当用户单击“检查所选年份”按钮时，它会调用 getSelectedRadio() 函数，该函数使用 querySelector() 方法选择名为“year”的单选按钮，并从 DOM 中进行检查。
用户无需选择任何单选按钮即可单击按钮并观察输出。
<html>
<body>
<h3>Using the <i> querySelector() method </i> to check whether a radio button is selected.</h3>
<input type = "radio" name = "year" value = "1999" id = "radio1"> 1999 </input><br>
<input type = "radio" name = "year" value = "2021" id = "radio2"> 2021 </input><br>
<input type = "radio" name = "year" value = "2001" id = "radio3" /> 2001 </input>
<p id="output"></p>
<button onclick="getSelectedRadio()">Check selected year</button>
<script>
let output = document.getElementById("output");
function getSelectedRadio() {
var selected = document.querySelector(
'input[name="year"]:checked');
if (selected) {
output.innerHTML += "Radio button is selected."
} else {
output.innerHTML += "Not any radio button is selected!"
}
}
</script>
</body>
</html>
用户学习了两种不同的方法来使用 JavaScript 获取选中的单选按钮。最好的方法是使用 querySelector() 方法，因为我们只需要编写一行代码。
以上是如何使用 JavaScript 检查单选按钮是否被选中？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何使用源地图调试缩小JavaScript代码？
Mar 18, 2025 pm 03:17 PM
本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。
开始使用Chart.js：PIE，DONUT和BUBBLE图表
Mar 15, 2025 am 09:19 AM
本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。 创建饼图和环形图 饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。 饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体
console.log输出结果差异：两次调用为何不同？
Apr 04, 2025 pm 05:12 PM
深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...
