JS radio判断选中|极客笔记

JS radio判断选中

在网页开发中，经常会用到单选框（radio）来让用户选择某个选项。在一些交互场景中，我们可能需要判断用户当前选中了哪个单选框。本文将介绍如何使用JavaScript来判断用户选中的单选框。

HTML单选框基本结构

首先，我们先看一下HTML中单选框的基本结构：

<input type="radio" name="fruit" value="apple"> 苹果
<input type="radio" name="fruit" value="banana"> 香蕉
<input type="radio" name="fruit" value="orange"> 橙子

以上代码展示了一个简单的单选框组，其中name属性相同的单选框会被归为一组，用户只能在同一组中选中一个选项。

使用JavaScript判断选中的单选框

接下来，我们将通过JavaScript来获取用户选中的单选框的值。我们可以通过以下代码来实现：

function getSelectedRadio() {
  var radios = document.getElementsByName('fruit');

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      return radios[i].value;
    }
  }
}

var selectedValue = getSelectedRadio();
console.log(selectedValue);

以上代码定义了一个名为getSelectedRadio的函数，该函数会返回用户选中的单选框的值。我们首先通过document.getElementsByName(‘fruit’)获取所有name属性为’fruit’的单选框，然后通过遍历这些单选框，判断哪个单选框被选中（即checked属性为true），最后返回被选中的单选框的值。

示例运行结果

假设用户选中了香蕉这个选项，我们调用getSelectedRadio函数，会返回’banana’这个值。下面是示例代码的运行结果：

var selectedValue = getSelectedRadio();
console.log(selectedValue); // 输出：banana

通过以上代码，我们成功获取到了用户选中的单选框的值，可以根据这个值来进行相应的业务逻辑处理。

总结

本文详细介绍了如何使用JavaScript来判断用户选中的单选框。通过获取所有name属性相同的单选框，并判断哪个单选框被选中，我们可以轻松地获取用户选中的值。

JS radio判断选中