从<form>获取单选框值异常：理想体重计算网页单选逻辑失效

兄弟，我太懂这种明明逻辑写了但单选按钮就是不听话的憋屈了！你遇到的问题大概率是踩了这几个常见的坑，咱们一个个排查：

• 单选按钮的name属性没统一：这是单选按钮实现互斥选择的核心！同组的单选按钮必须设置完全相同的name属性，浏览器才会把它们当成一组，选了一个就自动取消另一个的选中状态。要是你给女性按钮设了name="female"，男性按钮设成name="male"，那它们就是两个独立的组，选男性后女性按钮可能还处于选中状态，你的代码自然只会拿到第一个条件的结果。
  举个正确的写法参考：

  <input type="radio" name="gender" value="female" checked> 女性
  <input type="radio" name="gender" value="male"> 男性
  

• 获取性别值的逻辑错了：很多人会犯直接取第一个单选按钮值的错误，比如用getElementById只拿女性按钮的值，那不管用户选不选男性，拿到的都是female。正确的做法是找到当前被选中的那个单选按钮：

  // 方法一：遍历找选中项
  const genderRadios = document.querySelectorAll('input[name="gender"]');
  let selectedGender = '';
  for (const radio of genderRadios) {
    if (radio.checked) {
      selectedGender = radio.value;
      break;
    }
  }
  
  // 方法二：用CSS选择器直接获取选中项
  const selectedGender = document.querySelector('input[name="gender"]:checked').value;
  

• 没实时获取选中状态：如果你的代码是在页面加载时就获取了性别值，而没有在用户点击计算按钮时重新获取，那就算用户切换了性别，用的还是初始的默认值。一定要确保在计算理想体重的函数里，每次触发都重新获取当前选中的性别。

先检查第一个name属性的问题，这个是最常见的元凶！

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