我正在尝试使用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没有触发删除文本框中的值。即使这样有效，也是不正确的，因为无论是否选中复选框，每次触发复选框时都会将文本框置空。
我只需要在客户端解决此问题。
谢谢
[UPDATE]
根据要求，这是我的整个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>
我上面有Karl和Juan的变体jquery函数。
对此的任何帮助都非常受欢迎并被采纳。到目前为止，我已经尝试了所有这些，当我取消勾选复选框时，我仍然无法清除该文本框。
提前谢谢
答案 0 :(得分：3)
通过使用jQuery选择器来响应复选框的检查更改事件，考虑不引人注目的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("");
}
});
});
注意：我添加了一个CssClass属性，以便jQuery可以更轻松地选择正确的TextBox，以防表单上有或者更多。类选择器允许您避免在使用母版页和丑陋的嵌入式代码块语法（<%= ... %>）时发生的潜在服务器控件名称错误。
答案 1 :(得分：1)
在清除文字之前，您可以查看是否选中了复选框：
onclick="if(this.checked===true){document.getElementById('txtOtherFlag').value=''};" />
答案 2 :(得分：0)
首先将ClientIDMode =“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"/>
现在在你的＆lt;中添加以下内容脚本＆gt;标签
<script type="text/javascript">
$(function(){
$("#chkOTHER").change(function(){
if(!$(this).prop("checked")){
$("#txtOtherFlag").val('');
}
});
});
</script>