編碼最後一個單選按鈕文本輸入

Question

我有一個5個單選按鈕的列表，最後一個單選按鈕用於選擇手動輸入文本（「其他」選項）。我似乎無法讓表單爲所有5種可能性工作 - 無論是返回無線電值還是寫入值（目前只有寫入的值而不是任何預設的無線電值）。無法完成5種可能的回報。 這裏的JavaScript要麼選擇文本或將其清除時未選擇：

<script type= "text/javascript" > 
    function HandleRadioOtherBox(grp, txt) 
     { 
     var x, len = grp.length; 
     for (x =0; x<len; ++x) 
     { 
      if (grp[x].checked) break; 
     } 
     if (x < len && grp[x].value == txt.name) 
     { 
      txt.disabled = false; 
      txt.select(); 
      txt.focus(); 
     } 
     else 
     { 
      txt.value = ""; 
      txt.disabled = true; 
     } 
     return true; 
    } 

    window.onload = function() 
    { 
     var ele = document.forms[0].elements; 
     return HandleRadioOtherBox(ele['OPS'], ele['Country']); 
    } 
</script> 

而在這裏，在HTML單選按鈕部分：

<tr valign="top"> 
    <td class="style3">Country: </td> 
    <td class="copy"> 
    <input type="radio" name="OPS" value="United States" checked="checked" 
    onclick="return HandleRadioOtherBox(OPS, Country)" /> United States 
    <input type="radio" name="OPS" value="Canada" 
    onclick="return HandleRadioOtherBox(OPS, Country)" /> Canada 
    <input type="radio" name="OPS" value="England" 
    onclick="return HandleRadioOtherBox(OPS, Country)" /> England 
    <input type="radio" name="OPS" value="Australia" 
    onclick="return HandleRadioOtherBox(OPS, Country)" /> Australia <br /> 
    <input type="radio" name="OPS" value="Country" 
    onclick="return HandleRadioOtherBox(OPS, Country)" /> Other Country: 
     <input type='text' name="Country" id="Country" maxlength='80' /> 
    </td> 
    </tr> 

花了很多很多時間沒有太大的做了一個洞在水泥（還）。 :-) 幫助！

Answer 1

你可以寫你的形式的單一功能，檢查兩個事件：

• 單選按鈕check
• 文本輸入blur

，然後給出了基於其無線電適當的反應按鈕註冊了一個check事件或者文本輸入是否註冊了blur事件：

var radioButtons = document.querySelectorAll('input[type="radio"]'); 
 
var otherCountryRadio = document.querySelector('.other-country input[type="radio"]'); 
 
var otherCountryText = document.querySelector('.other-country input[type="text"]'); 
 

 
function returnValue() { 
 
    if (this === otherCountryRadio) { 
 
     otherCountryText.focus(); 
 
    } 
 

 
    else { 
 
     if (this.value.match(/\w/)) { 
 
      console.log(this.value); 
 
     } 
 
    } 
 
} 
 

 
for (var i = 0; i < radioButtons.length; i++) { 
 
radioButtons[i].addEventListener('change', returnValue, false); 
 
} 
 

 
otherCountryText.addEventListener('blur', returnValue, false);

div { 
 
margin: 12px; 
 
} 
 

 
.other-country input[type="text"] { 
 
visibility: hidden; 
 
} 
 

 
.other-country input:checked + input[type="text"] { 
 
visibility: visible; 
 
}

<form> 
 
<div class="top-countries"> 
 
<label><input type="radio" name="OPS" value="United States" checked="checked" /> United States</label> 
 
<label><input type="radio" name="OPS" value="Canada" /> Canada</label> 
 
<label><input type="radio" name="OPS" value="England" /> England</label> 
 
<label><input type="radio" name="OPS" value="Australia" /> Australia</label> 
 
</div> 
 

 
<div class="other-country"> 
 
<label> 
 
<input type="radio" name="OPS" value="Other" /> Other Country 
 
<input type="text" name="Country" /> 
 
</label> 
 
</div> 
 
</form>