javascript - 最后一个单选按钮文本输入的编码

Question

我有一个包含 5 个单选按钮的列表，最后一个单选按钮用于选择手动输入文本(“其他”选项)。我似乎无法让表格适用于所有 5 种可能性 - 它要么返回 radio 值，要么返回书面值(目前只有书面值，而不是任何预设的 radio 值)。无法让它适用于所有 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事件给出了适当的响应:

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>