如何使用JS获取Radio选中的值？

前言

作为JavaScript的一个重要应用场景之一，表单操作肯定是我们需要掌握的基本技能。获取Radio选中的值也是其中的一项必备技能。在本篇文章中，我们将会探讨如何使用JS获取Radio选中的值，希望可以帮助各位读者更好地掌握这项技能。

获取选中的Radio

在HTML中，Radio是一组互斥的选项，只有其中一个选项能被选择。想要获取选中的Radio的值，我们需要先找到它们所在的表单元素，通常是一个HTML的form元素。在form元素中，我们可以找到所有的Radio元素，并对它们进行遍历，判断哪个Radio被选中了。

我们可以通过以下方法来实现获取选中的Radio的值：

1. 获取form元素
2. 获取所有的Radio元素
3. 遍历所有的Radio元素，判断哪个被选中了
4. 返回选中的Radio的值

接下来，我们将会逐步介绍如何实现以上步骤。

步骤一：获取form元素

首先，我们需要获取form元素。在JS中，我们可以通过以下方式获取form元素：

var form = document.forms[0]; // 获取页面中第一个form元素
如果你的页面中有多个form元素，则需要根据实际情况选择对应的form元素。

步骤二：获取所有的Radio元素
接下来，我们需要获取form元素中的所有Radio元素。可以通过以下方式获取所有的Radio元素：

var radios = form.elements['radioName']; // 获取name属性为"radioName"的所有Radio元素
上述代码中，我们使用了form元素的elements属性，该属性返回一个包含所有表单元素的HTMLCollection对象，我们可以通过在方括号中指定元素的name属性来获取该元素。

需要注意的是，在获取表单元素时，我们不能直接使用document.getElementsByName方法，因为它会返回一个NodeList对象，而不是HTMLCollection对象。HTMLCollection对象具有数组的一些特性，如长度、索引等，因此在某些情况下比NodeList更加方便。

步骤三：遍历所有的Radio元素，判断哪个被选中了
接下来，我们需要遍历所有的Radio元素，判断哪个被选中了。可以通过以下方式实现：

var selectedValue;
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    selectedValue = radios[i].value;
    break;
  }
}
上述代码中，我们首先定义了一个变量selectedValue，用于存储选中的Radio的值。接下来，我们使用for循环遍历所有的Radio元素，如果发现某个Radio被选中了，则将该Radio的value属性赋值给selectedValue，并跳出循环。

需要注意的是，我们判断某个Radio是否被选中时，需要使用其checked属性。

步骤四：返回选中的Radio的值
最后，我们只需要返回选中的Radio的值即可：

return selectedValue;
总结
以上就是获取Radio选中的值的详细步骤。需要注意的是，我们在获取表单元素时，应该使用HTMLCollection对象，而不是NodeList对象。此外，判断Radio是否被选中时，应该使用其checked属性。

希望本文可以帮助各位读者更好地掌握如何使用JS获取Radio选中的值，有任何疑问或建议，欢迎在评论区留言。