为什么我的单选按钮实现无法正常运行

Question

一旦用户选择了任何单选按钮，我试图做一个onclick警报。 但是，如果用户按下名称为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;
    }

  }

}

Answer 2

删除循环并使用

document.flow_form.flow.value

 function processFlow() { var tempType = document.flow_form.flow.value; alert(tempType); } [].forEach.call(document.querySelectorAll('input[name="flow"]'), function(inp) { inp.onchange = processFlow; }); 

 label { display: block; } 

 <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" checked> ANVIL </label> <label class="flow_row"> <input type="radio" name="flow" value="fx"> FX </label> <label class="flow_row"> <input type="radio" name="flow" value="debt"> Debt </label> <label class="flow_row"> <input type="radio" name="flow" value="prms_repos"> PRMS Repos </label> <label class="flow_row"> <input type="radio" name="flow" value="prms_fx"> PRMS FX </label> <label class="flow_row"> <input type="radio" name="flow" value="equity_racs"> Equity options from RACS </label> <label class="flow_row"> <input type="radio" name="flow" value="convertible_bonds"> Convertible bonds </label> <label class="flow_row"> <input type="radio" name="flow" value="firm_derivatives"> Firm derivatives </label> <label class="flow_row"> <input type="radio" name="flow" value="stocks"> Stocks </label> </form> </div> </div>