javascript - 为什么我的单选按钮实现无法正常工作

Question

一旦用户选择任何单选按钮，我就会尝试执行单击警报。但是，如果用户按下名称为 ANVIL 的单选按钮之外的任何按钮，它会发送未定义的警报，而如果我按下名称为 Anvil 的单选按钮，它会发出警报，说明 anvil。

function processFlow() {

  var tempType;
  for (var i = 0; i < document.flow_form.flow.length; i++) {
    if (document.flow_form.flow[i].checked) {
      tempType = document.flow_form.flow[i].value;
    }
    alert(tempType);
    //document.getElementById("result").innerHTML = document.flow_form.flow[i].value;
    break;
  }

}

	<h1>Position Trigger Messages</h1>
<div class="container">
  <div class="sheet_column">
    <form name="flow_form">
      <h2>Flow</h2>
      <label class="flow_row">
        <input type="radio" name="flow" value="anvil" onclick="processFlow()" checked>ANVIL</label>
      <br>

      <label class="flow_row">
        <input type="radio" name="flow" value="fx" onclick="processFlow()">FX</label>
      <br>

      <label class="flow_row">
        <input type="radio" name="flow" value="debt" onclick="processFlow()">Debt</label>
      <br>

      <label class="flow_row">
        <input type="radio" name="flow" value="prms_repos" onclick="processFlow()">PRMS Repos</label>
      <br>

      <label class="flow_row">
        <input type="radio" name="flow" value="prms_fx" onclick="processFlow()">PRMS FX</label>
      <br>

      <label class="flow_row">
        <input type="radio" name="flow" value="equity_racs" onclick="processFlow()">Equity options from RACS</label>
      <br>

      <label class="flow_row">
        <input type="radio" name="flow" value="convertible_bonds">Convertible bonds</label>
      <br>

      <label class="flow_row">
        <input type="radio" name="flow" value="firm_derivatives" onclick="processFlow()">Firm derivatives</label>
      <br>

      <label class="flow_row">
        <input type="radio" name="flow" value="stocks" onclick="processFlow()">Stocks</label>
    </form>
  </div>

Answer 1

你的alert()和break应该在if里面。否则，当他们选择第一项之后的任何内容时，它将警告(tempType)，这是未定义的，然后中断，这意味着当循环退出时它将永远找不到匹配项。

function processFlow() {

  var tempType;
  for (var i = 0; i < document.flow_form.flow.length; i++) {
    if (document.flow_form.flow[i].checked) {
      tempType = document.flow_form.flow[i].value;
      alert(tempType);
      break;
    }

  }

}