如何用Vanilla JavaScript验证radio类型input输入框？

核心思路 #

单选按钮通过相同的name属性分组，我们可以通过该属性获取整个按钮组，然后检查其中是否有checked属性为true的元素。

1. 检查是否有单选按钮被选中 #

这个函数返回布尔值，告知是否有选项被选中：

function isGenderSelected() {
  // 获取name为gender的所有单选按钮
  const radioGroup = document.getElementsByName('gender');
  // 遍历按钮组，找到被选中的项
  for (const radio of radioGroup) {
    if (radio.checked) {
      return true;
    }
  }
  return false;
}

2. 获取选中的单选按钮值 #

如果需要拿到用户选择的具体值，可以用这个函数：

function getSelectedGender() {
  const radioGroup = document.getElementsByName('gender');
  for (const radio of radioGroup) {
    if (radio.checked) {
      return radio.value;
    }
  }
  // 未选中时返回null
  return null;
}

3. 简化写法（ES6+） #

借助数组方法可以让代码更简洁，同样是原生JavaScript：

// 检查是否选中
const isGenderSelected = () => 
  Array.from(document.getElementsByName('gender')).some(radio => radio.checked);

// 获取选中值
const getSelectedGender = () => 
  Array.from(document.getElementsByName('gender')).find(radio => radio.checked)?.value || null;

完整使用示例 #

给页面添加一个按钮来触发验证：

<style>
label { display: block; }
</style>
<label>
  <input type="radio" name="gender" value="male" />
  <span>Male</span>
</label>

<label>
  <input type="radio" name="gender" value="female" />
  <span>Female</span>
</label>

<button onclick="validateGender()">提交</button>

<script>
function validateGender() {
  if (!isGenderSelected()) {
    alert('请选择性别');
    return;
  }
  alert(`你选择的性别是：${getSelectedGender()}`);
}

function isGenderSelected() {
  const radioGroup = document.getElementsByName('gender');
  for (const radio of radioGroup) {
    if (radio.checked) {
      return true;
    }
  }
  return false;
}

function getSelectedGender() {
  const radioGroup = document.getElementsByName('gender');
  for (const radio of radioGroup) {
    if (radio.checked) {
      return radio.value;
    }
  }
  return null;
}
</script>

说明 #

• document.getElementsByName()返回的是HTMLCollection，可以直接用for...of遍历；如果想用数组方法（如some、find），需要用Array.from()转为数组。
• 所有代码都是原生Vanilla JavaScript，完全符合ECMAScript标准，未使用任何框架。

内容的提问来源于stack exchange，提问作者duduetc