Question

我对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（listview）

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

Answer 1

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

但是，还有：我看到你正在使用网格。我认为你可能有多个带有id的复选框：“cbxYes”。

我建议您转到http://api.jQuery.com并检查方法$（this）.before（）和.closest（）以找到您需要更改的复选框。

Answer 2

可能会从.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;
}

Answer 3

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

修改：在这种情况下，onKeyUp事件的效果会优于onKeyPress。

Answer 4

你应该使用

document.getElementById("txtQuestion").value

而不是

document.getElementById("txtQuestion").textContent

Answer 5

当你使用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更容易使用

javascript - 如何在向文本框添加值时自动选中复选框

5 个答案: