如何触发一个事件，该事件取决于满足特定条件的2个表单输入？

| 我想根据2个表单输入是否匹配来显示/隐藏页面上的元素。因此，在此示例中，如果文本字段大于100000并且单选按钮具有某个值，则将显示所述元素。如果仍选择正确的单选框，但数值降至100000以下，则元素将隐藏。（此代码是一个更大的脚本的一部分，以防它没有意义）。它在大多数情况下都起作用，但是当与单选值onclick事件一起使用时，文本字段的onchange/onkeyup事件不会自行触发。我必须重新单击单选按钮以获取更改的文本字段值才能触发该事件。（而且这不是onblur的问题。onchange可以单独运行，但不能与逻辑logical5ѭ运算符一起使用。）

    <li id=\"f-container-applicant-bondamount\">
        <label for=\"f-applicant-bondamount\">Amount of Bond</label>
        <input type=\"text\" name=\"ApplicantBondAmount\" id=\"f-applicant-bondamount\" onkeypress=\"showMoreInfo(this);\" />
    </li>

    <li id=\"f-container-applicant-is\"> 
        <label for=\"f-applicant-is\">Applicant is...</label> 
            <ul>
                <li>
                    <label for=\"f-applicant-is_0\">
                    <input type=\"radio\" name=\"ApplicantIs\" id=\"f-applicant-is_0\" value=\"Administrator\" onclick=\"showMoreInfo(this);\" />
                    Administrator
                    </label>
                </li>
                <li>
                    <label for=\"f-applicant-is_1\">
                    <input type=\"radio\" name=\"ApplicantIs\" id=\"f-applicant-is_1\" value=\"Executor\" onclick=\"showMoreInfo(this);\" />
                    Executor
                    </label>
                </li>
            </ul>
        </label>
    </li>

    <li id=\"f-container-applicant-moreinfo\">
        <label for=\"f-applicant-moreinfo\">More Info</label>
        <input type=\"text\" name=\"ApplicantMoreInfo\" id=\"f-applicant-moreinfo\" />
    </li>




function showMoreInfo(x) {
    var bond = document.getElementById(\'f-applicant-bondamount\');
    var y = bond.value;

    if (y > 100000 && x.value == \"Administrator\")  {
        document.getElementById(\'f-container-applicant-moreinfo\').style.display = \'block\';      
    }
    else if (y <= 100000 && x.value == \"Administrator\") {
        document.getElementById(\'f-container-applicant-moreinfo\').style.display = \'none\';
    }
}

提前致谢。

已邀请:

3 个回复

锯康

编辑：您的代码不起作用，因为showMoreInfo(x)函数假定x参数将是对一个或另一个单选按钮的引用，但是随后您的文本输入的onchange / onkeyup /任何事件都调用相同的函数，并且传递对自身的引用-这就是为什么它仅在单击单选按钮时才起作用。您可以尝试以下类似的方法，而不是将其传递给函数，让函数计算出自己对HTML元素的引用：

function showMoreInfo() {
   var bond = document.getElementById(\'f-applicant-bondamount\');
   var adminRadio = document.getElementById(\'f-applicant-is_0\');
   // var theOtherRadioIfYouNeedIt = document.getElementById(\'f-applicant-is_1\');

   var y = bond.value;

   if (y > 100000 && adminRadio.checked) {
      document.getElementById(\'f-container-applicant-moreinfo\').style.display = \'block\';
   }
   else if (y <= 100000 && adminRadio.checked) {
      document.getElementById(\'f-container-applicant-moreinfo\').style.display = \'none\';
   }
}

我最初关于键盘事件不足的观点仍然存在。我的原始答案：正如wombleton所说，“ 0”仅在焦点离开场时才会发生-这就是为什么在您的示例中，单击单选按钮会使“ 0”发生。就像已经说过的那样，您可以使用onkeyup代替onchange。但是，请记住，有多种方法，用户可以在不使用键盘的情况下更改输入中的值（因此没有onkeyup），例如，将鼠标拖放到输入上（拖动将更改焦点，但是如果您\ '不再使用onchange...）。或右键单击上下文菜单粘贴，剪切或删除。临时使用的我不确定满足这些要求的最简单方法是什么（我不必担心，因为我不喜欢页面上的内容随着用户在字段中的输入而变化，我通常只需要ѭ1即可专门检查Enter键），但是您可以查看onpaste和ondrop事件。