為什么我的單選按鈕實現無法正常運行

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>