首页 > 文章 > web前端 > 如何使用 JavaScript 获取选定单选按钮的值？

如何使用 JavaScript 获取选定单选按钮的值？

WBOY转载: 2023-08-30 22:29:021980浏览

尝试设计表单时最重要的 HTML 组件之一是单选按钮。用户只能从单选按钮显示的选项中选择一个选项。

通常，我们只是利用 JavaScript 中元素的 value 属性从 HTML 网页中检索元素的值。但对于单选按钮，我们无法做到这一点。原因是获取各个单选按钮的值是一个坏主意。

让我们开始阅读本文，了解如何获取选定单选按钮的值。为此，我们将使用checked属性。

使用选中属性

检查的属性是布尔属性。如果存在，则表示在页面加载时应预先选择（选中）元素。 Checked 属性可与复选框和单选输入类型一起使用。使用JavaScript，也可以在页面加载后修改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>

运行脚本时，它将生成一个由文本以及单选按钮和提交按钮组成的输出。当用户选择值并单击按钮时，会弹出一个窗口，显示所选值。

以上是如何使用 JavaScript 获取选定单选按钮的值？的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html NULL 事件选择器

声明：

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

上一篇：如何在 TypeScript 中创建异步函数？下一篇：JavaScript 地理定位：构建位置感知应用程序

查看更多