javascript - 向文本框添加值时如何自动检查复选框答案

【问题标题】：javascript - how to automatically check checkbox when adding value to textboxjavascript - 向文本框添加值时如何自动检查复选框
【发布时间】：2014-02-23 09:52:12
【问题描述】：

我对 ASP.NET 中的 javascript 略知一二。我将文本框放在复选框控件旁边。因此，当您输入文本框时，复选框应自动被选中。当您删除文本框中的字符串时，该复选框应自动取消选中。如何用javascript编写代码？

我在这里尝试编写的代码不起作用：

<script type="text/javascript" language="javascript">
    function TextboxFunction() {
        if (document.getElementById("txtQuestion").textContent != null)
            document.getElementById("cbxYes").checked = true;

        if (document.getElementById("txtQuestion").textContent == null)
            document.getElementById("cbxYes").checked = false;
    }
</script>

Asp.net（列表视图）

<ItemTemplate>
    <tr class="item" runat="server">
        <td><asp:TextBox ID="txtQuestion" OnChange="javascript:TextboxFunction();" AutoPostBack="true" Width="200px" runat="server"></asp:TextBox></td>
        <td><asp:CheckBox ID="cbxYes" runat="server"  AutoPostBack="True" /></td>
    </tr>
</ItemTemplate>

【问题讨论】：

标签： javascript asp.net checkbox textbox

【解决方案1】：

我相信onChange 事件只会在输入失去焦点后触发。尝试在txtQuestion 上捕获onKeyPress 事件。在事件处理程序中，选中 document.getElementById("txtQuestion").value.length >= 0 并根据需要选中或取消选中复选框。

编辑：在这种情况下，onKeyUp 事件将比onKeyPress 工作得更好。

【讨论】：

不适合我。你能不能给你完整的代码，以便我理解。谢谢 :)

【解决方案2】：

你应该使用

document.getElementById("txtQuestion").value

代替

document.getElementById("txtQuestion").textContent

【讨论】：

其实是值。区分大小写
@ivowiblo :: 我的错.. 已更新。谢谢:)

【解决方案3】：

从.textContent 更改为.Value，并将Null 更改为"" 可能会起作用

<script type="text/javascript" language="javascript">
function TextboxFunction() {
    if (document.getElementById("txtQuestion").Value != "")
        document.getElementById("cbxYes").checked = true;
    if (document.getElementById("txtQuestion").Value == "")
        document.getElementById("cbxYes").checked = false;
}

【讨论】：

另外，您可以跳过最后的if 检查。 . .只需将if (document.getElementById("txtQuestion").Value == "") 更改为else。
我只是大胆猜测一下，这会导致错误，例如“HTMLelement has no property Value”，因为它区分大小写。
不客气，布雷特。顺便说一句，我喜欢 THOR 视频，让我大吃一惊！他们在另一个问题中删除了我的一些 cmets，关于我谈到的 Apple IIe 的事情，哈哈，不知道你是否看到了。 @BrettFromLA
@Fred-ii- 我确实看到了！我也是一个“老家伙”——尤其是因为 Apple ][+ 早于 Apple ][e!哎呀，我的电脑甚至没有小写字母。你苹果][e 用户过得很好。 XD
大声笑，布雷特，我的信息确实让我记得很清楚，我们在 80 年代中期使用 Apple IIe，但不是用于编程，而是用于图形艺术行业。然后我写了“是的，我那么老，哈哈”所以我们大约在同一个年龄段。还说当时9英寸的启动盘要90美元。一个人不想把一个搞砸了，当时的老板碰巧把手指放在了暴露的地方（一次）。哦，好吧，他装满了，所以没什么大不了的；他买得起 ;-) @BrettFromLA - 我们拥有被认为（尖端）“最先进”的技术，哈哈！

【解决方案4】：

当您使用 ItemTemplate 时，我假设它位于转发器或类似的东西中。在这种情况下，您放入控件的 ID 将与它在 HTML 中呈现的 ID 不同，因为您最终将拥有多个具有相同 ID 的控件。 Asp.Net 处理这个问题。

你可以这样做：

 <ItemTemplate>
     <tr class="item" runat="server">
        <td><asp:TextBox ID="txtQuestion" OnChange="TextboxFunction(this);" Width="200px" runat="server"></asp:TextBox></td>
        <td><asp:CheckBox ID="cbxYes" runat="server" /></td>
    </tr>
 </ItemTemplate>

还有 JS：

function TextboxFunction(textbox) {
    var textBoxTd = textbox.parentNode;
    var checkboxTd = textBoxTD.nextSibling;
    var chx = checkboxTd.childNodes[0];
    chx.checked = textbox.value == "";
}

您将文本框作为参数传递，因此您不必通过 id 获取它。然后查找下一个 TD 中的复选框并应用逻辑。对于这种事情，JQuery 比纯 javascript 更容易使用

【讨论】：

【解决方案5】：

更改您正在使用的属性。尝试 .value 而不是 .textContent。

但是，另外：我看到您正在使用网格，那么。我认为您可能有多个 id 为“cbxYes”的复选框。

我建议你去http://api.jQuery.com 并检查方法 $(this).before() 和 .closest() 找到你需要更改的复选框。

【讨论】：