为什么我无法获取单选按钮的值？

Question

选择男性或女性后，我会按下点击按钮，这样我就可以选择一个。 而且，如果我在没有选择任何东西的情况下按下单击按钮，错误消息为 output。

如果我 select 一个人并按下点击按钮，即使我可以获得这个人的价值，我也会收到一条错误消息。 对于女人来说效果很好。 为什么它对男人不起作用？

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 = "";
          }
          
          else{
     
            
            btn_err.innerHTML = "please fill in the value";
          
          }
     
        console.log('selected ' + humanValue );
      }
});

Answer 1

那是因为你正在运行 for 循环，即使你检查了它是一个人。 如果 i = 1 并且 humanRadio[i] 被选中，循环将继续，所以当 i = 2 时它跳转到 else。

btn.addEventListener('click', function () {
  let humanRadio = document.getElementsByName('human');

  let humanValue = '';

  for (let i = 0; i < humanRadio.length; i++) {
    console.log(humanRadio[i].checked);
    if (humanRadio[i].checked) {
      humanValue = humanRadio[i].value;
      console.log(humanValue);
      btn_err.innerHTML = '';
      break; //When using break, the loop will be quitted
    } else {
      btn_err.innerHTML = 'please fill in the value';
    }

    console.log('selected ' + humanValue);
  }
});

希望你明白。

Answer 2

或者，您可以过滤掉选中的输入，如果没有选中的输入，则其长度将为0 ，然后您可以打印错误。

 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 = ''; const checkedInput = [...humanRadio].filter(r => r.checked); if (checkedInput.length) { humanValue = checkedInput[0].value; btn_err.innerHTML = ""; } else { btn_err.innerHTML = "please fill in the value"; } console.log('selected ' + humanValue); });

 <table> <tr> <td></td> <td></td> <td> <input type="radio" name="human" value="man">man <input type="radio" name="human" value="woman">woman </td> <td></td> </tr> <tr> <td></td> <td></td> <td id="btn_error"></td> <td></td> </tr> <tr> <td></td> <td></td> <td align="right"><input type="button" value="click" id="btn"></td> <td></td> </tr> </table>

Answer 3

您好，请尝试使用查询选择器。 它的代码要少得多。

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

var btn = document.getElementById('btn');

btn.addEventListener('click', function() {

  let humanRadio = document.querySelector('input[name=human]:checked')

  //humanRadio.value contains the value, if one the the options was selected
  btn_err.innerHTML = humanRadio != null ? humanRadio.value : 'Not Found';
  
});