用 Javascript 验证表单(form)中的单选(radio)值

下面是用 JavaScript 验证表单中的单选(radio)值的完整攻略：

1. 获取单选按钮的值

首先，我们需要通过 document.getElementsByName() 方法获取所有同名的单选按钮，然后循环遍历每个单选按钮，判断哪个单选按钮被选中（即 checked 属性为 true）。

下面是一个获取选中的单选按钮值的示例代码：

// 获取所有同名单选按钮
const radios = document.getElementsByName('sex');

// 定义变量存储选中的值
let checkedValue = '';

// 循环遍历每个单选按钮
radios.forEach(radio => {
  // 如果当前单选按钮被选中，则获取其值
  if (radio.checked) {
    checkedValue = radio.value;
  }
});

// 获取选中的单选按钮的值
console.log(checkedValue);

上面代码中，我们首先使用 document.getElementsByName('sex') 方法获取了所有同名的单选按钮，然后在循环遍历每个单选按钮的过程中，判断哪个单选按钮被选中，最后获取选中的单选按钮的值。

2. 表单校验

在表单中，我们可以通过 JavaScript 对用户输入的数据进行校验。下面是一个表单校验的示例代码：

<!-- html 代码 -->
<form onsubmit="return checkForm()">
  <input type="text" name="username" placeholder="用户名">
  <br>
  <input type="password" name="password" placeholder="密码">
  <br>
  <label>
    <input type="radio" name="sex" value="male">男
  </label>
  <br>
  <label>
    <input type="radio" name="sex" value="female">女
  </label>
  <br>
  <button type="submit">提交</button>
</form>

<!-- JavaScript 代码 -->
<script>
function checkForm() {
  // 获取表单元素
  const username = document.getElementsByName('username')[0].value;
  const password = document.getElementsByName('password')[0].value;
  const radios = document.getElementsByName('sex');

  // 判断是否输入了用户名和密码
  if (username === '' || password === '') {
    alert('请输入用户名和密码');
    return false;
  }

  // 定义变量存储选中的值
  let checkedValue = '';

  // 循环遍历每个单选按钮
  radios.forEach(radio => {
    // 如果当前单选按钮被选中，则获取其值
    if (radio.checked) {
      checkedValue = radio.value;
    }
  });

  // 判断是否选中了单选按钮
  if (checkedValue === '') {
    alert('请选择性别');
    return false;
  }

  // 表单提交
  alert('表单提交成功');
  return true;
}
</script>

上面代码中，我们定义了一个 checkForm() 函数，用于校验表单的数据。在该函数中，我们首先通过 document.getElementsByName() 方法获取了表单中的所有元素，然后判断是否输入了用户名和密码，是否选择了单选按钮。最后，当表单校验通过时，我们可以在函数中输出提交表单成功的提示信息。

至此，我们已经完成了用 JavaScript 验证表单中的单选(radio)值的完整攻略。