js获取radio值的方法

在Web开发中，经常会用到单选按钮（radio）来让用户从多个选项中选择一个。而获取用户选择的radio值是一个常见的需求。下面将介绍几种在JavaScript中获取radio值的方法。

方法一：通过遍历获取

在HTML中，具有相同name属性的radio按钮构成一组，用户只能选择其中一个。我们可以通过遍历这组radio按钮来找到被选中的那个。

示例代码如下：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<button onclick="getValue()">获取值</button>
<script>
function getValue() {
  var radios = document.getElementsByName('gender');
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      console.log(radios[i].value);
    }
  }
}
</script>

在上述代码中，我们先通过getElementsByName获取到所有name为gender的radio按钮，然后遍历它们，找到checked属性为true的那个，即为用户选中的，最后输出其value值。

方法二：使用事件委托

如果radio按钮是动态生成的，或者有多个radio组，使用事件委托会更加方便。

示例代码如下：

<form id="myForm">
  <input type="radio" name="fruit" value="apple">苹果
  <input type="radio" name="fruit" value="banana">香蕉
</form>
<script>
document.getElementById('myForm').addEventListener('change', function (e) {
  if (e.target.type === 'radio') {
    console.log(e.target.value);
  }
});
</script>

在这段代码中，我们给包含radio按钮的表单添加了一个change事件监听器，当用户选择一个radio按钮时，就会触发该事件，然后判断触发事件的元素是否为radio按钮，如果是，就输出其value值。

方法三：使用jQuery

如果项目中引入了jQuery库，获取radio值会更加简洁。

示例代码如下：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input type="radio" name="color" value="red">红色
<input type="radio" name="color" value="blue">蓝色
<button onclick="getRadioValue()">获取颜色</button>
<script>
function getRadioValue() {
  var value = $('input[name="color"]:checked').val();
  console.log(value);
}
</script>

通过上述几种方法，我们可以轻松地在JavaScript中获取radio按钮的值，根据项目的实际情况选择合适的方法即可。