如何使用 JavaScript 检查单选按钮是否被选中？-js教程-PHP中文网

首页

web前端

js教程

如何使用 JavaScript 检查单选按钮是否被选中？

王林

Aug 24, 2023 pm 09:49 PM

如何使用 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 id="Using-the-i-checked-property-i-of-the-radio-button-to-check-whether-a-radio-button-is-selected">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 id="Using-the-i-checked-property-i-of-the-radio-button-to-check-whether-a-radio-button-is-selected">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 id="Using-the-i-querySelector-method-i-to-check-whether-a-radio-button-is-selected">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中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。