getElementsByName 的应用－获取radio button组的选择值

最新推荐文章于 2022-12-27 22:00:45 发布

转载最新推荐文章于 2022-12-27 22:00:45 发布 · 612 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用JavaScript的getElementsByName方法来获取一组具有相同name属性的radiobutton的选中值。通过示例代码展示了具体实现过程，适用于前端开发人员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

getElementsByName用来获取name一样的一组元素。
应用：
获取一组radio button 的选中值。
例子如下：

<html>
<head>
  <title>getElementsByName Sample</title>
  <script type="text/javascript" language="javascript">
    function getColor() {
      var oColors = document.getElementsByName("rdColor");
      var color = "";
      for (var i=0;i<oColors.length;i++) {

        if (oColors[i].checked) {
          color = oColors[i].value;
          break;
        }
      }
      if (color == "")
        alert("Please choose a color!!");
      else
        alert("Your favorite color is: " + color);
    }
  </script>
</head>
<body>
  <form action="javascript:getColor();" method="post">
    <fieldset>
      <legend>What color do you like?</legend>
      <input type="radio" name="rdColor" value="red" /> Red <br />
      <input type="radio" name="rdColor" value="green" /> Green <br />
      <input type="radio" name="rdColor" value="blue" /> Blue <br />
    </fieldset>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

关注博主即可阅读全文