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

Question

I am trying to do a onclick alert once the user selected any radio button. However, if the user presses any of the buttons besides the radio button with the name ANVIL, it sends an alert undefined, while if I press the radio button name Anvil, it will alert stating 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

Your alert() and break should be inside the if. Otherwise, when they select anything after the first item, it will alert(tempType) which is undefined, then break, meaning it will never find a match as the loop exited.

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

Remove your loop and use

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>