为什么单选按钮选中男性选项后点击仍会输出错误提示？

根因分析 #

代码的逻辑错误出在循环内部的提示处理逻辑：
你将错误提示赋值放在了遍历每个单选按钮的else分支中，会逐次覆盖提示内容。如果你的单选按钮排序为男在前、女在后，就会出现你遇到的异常：

• 选中男性选项时：第一次遍历到男选项，触发if分支清空错误提示，但是循环不会停止，继续遍历到第二个女选项时，女未被选中，触发else分支重新赋值错误提示，最终表现为能拿到选中值但仍显示错误
• 选中女性选项时：第一次遍历到男选项触发else赋值错误提示，第二次遍历到女选项触发if清空错误提示，循环最后一步是清空操作，所以功能表现正常

修复方法 #

提供两种常用的修复方案：

方案1：找到选中项后终止循环 #

在if分支中赋值结束后添加break终止遍历，避免后续未选中的选项触发else逻辑覆盖提示：

var btn_err = document.getElementById("btn_error");
btn_err.style.color = "red"; 

var btn = document.getElementById('btn');
 
btn.addEventListener('click', function() {
  let humanRadio = document.getElementsByName('human');
  let humanValue = '';
  for (let i = 0; i < humanRadio.length; i++){
    if (humanRadio[i].checked){
      humanValue = humanRadio[i].value;
      console.log(humanValue);
      btn_err.innerHTML = "";
      break; // 新增：找到选中项直接停止循环
    } else {
      btn_err.innerHTML = "please fill in the value";
    }
    console.log('selected ' + humanValue );
  }
});

方案2：循环结束后统一判断提示（更推荐） #

不在循环内处理错误提示，遍历完成后根据是否拿到选中值统一处理，逻辑更清晰，不会出现覆盖问题：

var btn_err = document.getElementById("btn_error");
btn_err.style.color = "red"; 

var btn = document.getElementById('btn');
 
btn.addEventListener('click', function() {
  let humanRadio = document.getElementsByName('human');
  let humanValue = '';
  // 循环仅做取值
  for (let i = 0; i < humanRadio.length; i++){
    if (humanRadio[i].checked){
      humanValue = humanRadio[i].value;
      console.log(humanValue);
      break;
    }
  }
  // 循环结束统一处理提示
  if (humanValue) {
    btn_err.innerHTML = "";
    console.log('selected ' + humanValue );
  } else {
    btn_err.innerHTML = "please fill in the value";
  }
});

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