选择文本框时激活单选按钮答案

【问题标题】：Activate radiobutton when text box is selected选择文本框时激活单选按钮
【发布时间】：2013-06-28 14:10:02
【问题描述】：

我正在尝试在我正在处理的表单上设置一些 Javascript 表单验证。我已经完成了所有验证工作，但我的任务是做一件事，我似乎无法弄清楚，也无法在网上找到很多关于它的文章。

我面临的挑战是，如果用户想在文本框中输入“其他”字段，我希望自动选中“其他”单选按钮。这是我在那里的代码，显然不适合我。

if (f.OtherTextValue.value !== '')
{
    document.getElementById("OtherTextRadio").checked = true;
    return false;
}

所以我想我想做的是：如果 OtherTextValue（我的文本框）不是空白的，那么去获取我的单选按钮的 ID 并使其选中/选中。

我在 Javascript 领域还是个新手，但我正在努力学习。

感谢您的帮助。

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

给text元素绑定一个事件处理器，然后根据有无值来设置checkbox的状态：

$('#OtherTextValue').on('keyup', function() {
  $('#OtherTextRadio').prop('checked', !!this.value.length);
});

您可能希望使用其他事件，因为这仅在释放键时触发。 Check the documentation

Here's a simple example

【讨论】：

【解决方案2】：

检查使用prop:

$('#OtherTextRadio').prop('checked', true);

我没有看到你的代码，所以最终可能应该是这样的：

if($('#OtherTextValue').val() == "Other") {
    $('#OtherTextRadio').prop('checked', true);
}

【讨论】：

【解决方案3】：

$(document).ready(function(){
 if ($('#OtherTextValue').val('Other'))) {
    $('#OtherTextRadio').prop('checked', true);   
  }
});

通常在单击“其他”单选按钮时，启用文本框。但您的想法似乎有所不同。请做更多的研究。

【讨论】：

【解决方案4】：

如果您想在没有 JQuery 的情况下执行此操作，正如您在问题中的代码所暗示的那样，我在 JSFiddle 中模拟了一些可能会有所帮助的内容： http://jsfiddle.net/xAcbm/

这里的关键是将您的支票链接到一个事件，在这个例子中我添加了一个简单的按钮：

<input type="radio" id="chlVal" name="selVal" value="Val 1"/>Value 1<br/>
<input type="radio" id="chkOther" name="selVal" value="Other"/>Other<br/>
<input type="text" id="txtOther">
<button id="btn" onclick="Javascript: checkOther()">Check Form</button>

Javascript 是：

function checkOther()
{
    if (document.getElementById('txtOther').value!='')
    {
        alert('Value in the box');
        document.getElementById('chkOther').checked=1;
    }
}

希望有帮助

【讨论】：

【解决方案5】：

使用 onchange 事件

<asp:radiobutton ID="OtherTextRadio" runat="server"></asp:radiobutton>
<asp:TextBox ID="TextBox1" runat="server" onchange="checkRadio();" ></asp:TextBox>

脚本如下

   function checkRadio() {

       if (document.getElementById("TextBox1").value != "") {
           document.getElementById("OtherTextRadio").checked = true;
       }
       else document.getElementById("OtherTextRadio").checked = false;
   }

【讨论】：

【解决方案6】：

$(document).ready(function(){
    $('#sourcetext').on('click', function() {
        $('#sourcecheck').prop('checked', true);
    });
});

【讨论】：