如何使用Javascript清除基于复选框的文本框

我试图用javascript编写代码（以避免在服务器上触发验证）来清除一个文本框（如果未选中与之关联的复选框）

我有这个密码

    <input type="checkbox" id="chkOTHER" onclick="document.getElementById('txtOtherFlag').value='';" />
    <asp:TextBox ID="txtOtherFlag" runat="server" AutoPostBack="True" CausesValidation="True" ValidationGroup="ValidationGroup1"></asp:TextBox>

问题是复选框中的Javascript没有触发以删除文本框中的值。即使这样做有效，也不正确，因为无论复选框是否选中，每次触发复选框时都会清空文本框

我只需要在客户端解决这个问题

多谢各位

[更新]

按照要求，这是我的整个ASPX页面减去与问题无关的部分

    <%@ Page Language="C#" MasterPageFile="~/Attendance/Attendance.master" AutoEventWireup="true" CodeFile="ClassAttendance.aspx.cs" Inherits="Attendance_ClassAttendance" 
        Title="Class Attendance" Culture="en-AU" %>
    <%@Register TagPrefix="tecnq" TagName="ResetPassword" Src="~/Controls/ResetPassword.ascx" %>
    <%@Register TagPrefix="tecnq" TagName="ContactLog" Src="~/Controls/ContactLogKPI.ascx" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

...
we go now to my panel and table ...
...

    <asp:panel ID="PanelPreStart" runat="server" Visible="false" Enabled="false" >
    <table runat="server" id="tblPreStart" style="width: 649px; height: 543px; border-right: activecaption thin solid; border-top: activecaption thin solid; border-left: activecaption thin solid; border-bottom: activecaption thin solid; background-color: white; background-image: none;">

...
we now go to the checkbox and textbox controls within a customvalidator ...
...

        <tr>
            <td id="tdDocs" runat="server" style="table-layout: fixed; visibility: visible; overflow: auto; border-collapse: separate; font-size: 12pt; vertical-align: top; text-align: left; font-weight: bold; font-family: Arial; background-color: transparent; width: 799px; background-image: none;" colspan="2">
                <strong>What documents will be required for today's tasks?<br /></strong>
                    <span style="font-size: 9pt">(Please ensure supporting documentation is attached)</span>
                <asp:CustomValidator ID="CustomValidator12" runat="server"
                        ErrorMessage='Tick one of the "Documents required today" section tick boxes.' OnServerValidate="CustomValidator12_ServerValidate" ValidationGroup="ValidationGroup1" Font-Names="Arial" Font-Size="9pt">*</asp:CustomValidator><br />
                    <table style="width: 651px; font-weight: bold; font-size: 10pt; font-family: Arial;">
                        <tr>
                            <td style="font-size: 10pt; font-family: Arial; height: 22px; font-weight: bold; width: 247px;">
                                <strong>
                                    <asp:CheckBox ID="chkJSEA" runat="server" Text="JSEA" Width="200px" Font-Names="Arial" Font-Size="10pt" ValidationGroup="ValidationGroup1" /></strong></td>
                            <td style="height: 22px; font-weight: bold; font-size: 10pt; width: 278px; font-family: Arial;"><asp:CheckBox ID="chkRISKA" runat="server" Text="Risk Assessment" Width="200px" Font-Bold="True" Font-Names="Arial" Font-Size="10pt" ValidationGroup="ValidationGroup1" /></td>
                            <td style="height: 22px; font-weight: bold; font-size: 10pt; width: 121px; font-family: Arial;"><asp:CheckBox ID="chkWMS" runat="server" Text="Work Method Statement" Width="200px" Font-Bold="True" Font-Names="Arial" Font-Size="10pt" ValidationGroup="ValidationGroup1" /></td>
                        </tr>
                        <tr>
                            <td style="font-size: 12pt; width: 247px; font-family: Arial; height: 22px;">
                                <strong>
                                    <asp:CheckBox ID="chkSOP" runat="server" Text="Safe Operating Procedures" Width="200px" Font-Names="Arial" Font-Size="10pt" ValidationGroup="ValidationGroup1" /></strong></td>
                            <td style="height: 22px" colspan="2">
                                <label><input type="checkbox" id="chkOTHER" runat="server" />Other </label>
                                <asp:TextBox ID="txtOtherFlag" ClientIDMode="Static" runat="server" AutoPostBack="True" CausesValidation="True" ValidationGroup="ValidationGroup1"></asp:TextBox>
                            </td>
                        </tr>
                    </table>
            </td>
        </tr>

...
and much further down is the javascript/jquery stuff, after the end of the Panel above and after the content placeholder
...

    </table>
    </asp:panel>

    <script src="https://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function(){
            $("#chkOTHER").change(function(){
                if(!$(this).prop("checked")){
                    $("#txtOtherFlag").val('');        
                }
            });
        });

...
some other javascript functions here which work
...

//        $(document).ready(function() {
//            $("#chkOTHER").change(function() {
//                if ($(this).not(":checked")) {
//                    $('.TheTextBox').val("");
//                } 
//            });
//        });
    </script>
</asp:Content>

...
我们现在转到我的面板和桌子。。。
...
...
我们现在转到customvalidator中的复选框和文本框控件。。。
...
今天的任务需要哪些文档？

（请确保附上证明文件）
*





其他
...
更进一步的是javascript/jquery内容，在上面面板的末尾和内容占位符之后
...
$（函数（）{
$（“#chkOTHER”）.change（函数（）{
如果（！$（此）.prop（“选中”））{
$（“#txtOtherFlag”）.val（“”）；
}
});
});
...
这里还有一些其他javascript函数可以工作
...
//$（文档）.ready（函数（）{
//$（“#chkOTHER”）.change（函数（）{
//如果（$（this）.not（“：checked”））{
//$（'.TheTextBox'）.val（“”）；
//                } 
//            });
//        });

我有上面Karl和Juan的变量jquery函数

在这方面的任何帮助都得到了极大的赞赏和采纳。到目前为止，我都试过了，当我取消勾选复选框时，我仍然无法清除该文本框

---

提前感谢

您可以在清除文本之前查看复选框是否已选中：

onclick="if(this.checked===true){document.getElementById('txtOtherFlag').value=''};" />

---

您可以在清除文本之前查看复选框是否已选中：

onclick="if(this.checked===true){document.getElementById('txtOtherFlag').value=''};" />

---

考虑使用jQuery选择器来响应复选框的check changed事件，以避免JavaScript的干扰，如下所示：

<asp:TextBox ID="txtOtherFlag" runat="server" AutoPostBack="True" 
         CausesValidation="True" ValidationGroup="ValidationGroup1" 
         CssClass="TheTextBox" />

$(document).ready(function() {
    $("#chkOTHER").change(function() {
        if ($(this).not(":checked")) {
            $('.TheTextBox').val("");
        } 
    });
});

$（文档）.ready（函数（）{
$（“#chkOTHER”）.change（函数（）{
如果（$（this）.not（“：checked”））{
$（'.TheTextBox'）.val（“”）；
} 
});
});

---

注意：我添加了一个

CssClass

属性，以允许jQuery更容易地选择正确的

TextBox

，以防表单上有或将有更多内容。类选择器允许您避免在使用母版页和难看的嵌入式代码块语法（

）时可能发生的服务器控件名称损坏。
通过使用jQuery选择器来响应复选框的check changed事件，考虑不引人注目的JavaScript，如下所示：

<asp:TextBox ID="txtOtherFlag" runat="server" AutoPostBack="True" 
         CausesValidation="True" ValidationGroup="ValidationGroup1" 
         CssClass="TheTextBox" />

$(document).ready(function() {
    $("#chkOTHER").change(function() {
        if ($(this).not(":checked")) {
            $('.TheTextBox').val("");
        } 
    });
});


$（文档）.ready（函数（）{
$（“#chkOTHER”）.change（函数（）{
如果（$（this）.not（“：checked”））{
$（'.TheTextBox'）.val（“”）；
} 
});
});

注意：我添加了一个
CssClass
属性，以允许jQuery更容易地选择正确的
TextBox
，以防表单上有或将有更多内容。类选择器允许您避免使用母版页和难看的嵌入式代码块语法（
）时可能发生的服务器控件名称损坏。
首先向文本框添加clientmode=“Static”，如下所示

<asp:TextBox ID="txtOtherFlag" ClientIDMode="Static" runat="server" AutoPostBack="True" CausesValidation="True" ValidationGroup="ValidationGroup1"></asp:TextBox>



这是为了避免在文本框中使用类，并能够使用id为“txtOtherFlag”的文本框

然后，从复选框中删除onclick事件

<input type="checkbox" id="chkOTHER"/>



现在在