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事件，给出了相应的响应：

＆＃13;

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);

＆＃13;

div {
margin: 12px;
}

.other-country input[type="text"] {
visibility: hidden;
}

.other-country input:checked + input[type="text"] {
visibility: visible;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: