js 获取radio选中的值|极客笔记

js 获取radio选中的值

在前端开发中，我们经常会遇到需要获取用户在表单中选择的值的情况。特别是在处理单选按钮（radio）时，我们需要通过JavaScript来获取用户选择的值。本文将详细介绍如何使用JavaScript来获取radio选中的值。

HTML中的radio按钮

首先，我们需要在HTML中创建一组radio按钮。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radio Button Demo</title>
</head>
<body>
  <h2>请选择您喜欢的水果：</h2>

  <input type="radio" id="apple" name="fruit" value="apple">
  <label for="apple">苹果</label><br>

  <input type="radio" id="orange" name="fruit" value="orange">
  <label for="orange">橙子</label><br>

  <input type="radio" id="banana" name="fruit" value="banana">
  <label for="banana">香蕉</label><br>

  <button onclick="getSelectedFruit()">获取选中的水果</button>

  <p id="result"></p>

  <script>
    function getSelectedFruit() {
      // 在这里编写获取选中的水果的逻辑
    }
  </script>
</body>
</html>

在上面的示例代码中，我们创建了三个radio按钮，分别代表苹果、橙子和香蕉三种水果。同时，我们添加了一个按钮，当用户点击按钮时，会执行名为getSelectedFruit()的JavaScript函数来获取选中的水果。

JavaScript获取选中的值

接下来，我们需要编写JavaScript函数getSelectedFruit()来获取用户选择的水果。我们可以通过遍历所有的radio按钮，找到被选中的那个，并获取其值。示例代码如下：

function getSelectedFruit() {
  // 获取所有的radio按钮
  var radios = document.querySelectorAll('input[name="fruit"]');

  var selectedFruit = "";

  // 遍历所有的radio按钮
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      selectedFruit = radios[i].value;
      break;
    }
  }

  // 显示选中的水果
  document.getElementById("result").innerText = "您选择的水果是：" + selectedFruit;
}

在上面的代码中，我们首先通过document.querySelectorAll('input[name="fruit"]')来获取所有name属性为”fruit”的radio按钮。然后，通过for循环遍历所有的radio按钮，找到被选中的那个，并将其值赋给selectedFruit变量。最后，我们将选中的水果显示在页面上。