如何使用Javascript清除基于复选框的文本框
How to clear a textbox based on a checkbox using 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>
我上面有Karl和Juan的变体jquery函数。
对此的任何帮助都非常感谢并被采纳。到目前为止,我已经尝试了所有这些,但是当我取消选中复选框时,我仍然无法清除该文本框。
提前谢谢你
通过使用 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("");
}
});
});
注意:我添加了一个CssClass
属性,以允许jQuery更轻松地选择正确的TextBox
,以防表单上有或将要有更多。类选择器允许您避免在使用母版页和丑陋的嵌入式代码块语法 (<%= ... %>
) 时发生的潜在服务器控件名称重整
您可以在清除文本之前查看复选框是否已选中:
onclick="if(this.checked===true){document.getElementById('txtOtherFlag').value=''};" />
首先将 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"/>
现在在<脚本>标记中添加以下内容脚本>
<script type="text/javascript">
$(function(){
$("#chkOTHER").change(function(){
if(!$(this).prop("checked")){
$("#txtOtherFlag").val('');
}
});
});
</script>
相关文章:
- 复选框与文本内联-JS问题
- 根据文本值禁用复选框
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- Javascript选中/取消选中所有复选框并将值写入文本区域
- 获取文本框中所有选定复选框的值
- 动态选中文本区域中现有项目的复选框组
- 选中复选框时更改文本框值
- 单击每个表格行中的复选框时启用文本框
- jQuery表 - 如何根据选中的复选框在单元格中写入文本
- 在 AngularJs 中触发文本框的复选框
- 基于复选框 Jquery 更新文本框
- 根据复选框选择 jQuery 更新文本框
- 我无法禁用带有复选框的文本框
- 从选中的复选框中获取所有值,并将其放入文本区域
- 如何使用选中的复选框文本自动填充输入文本字段
- 如何隐藏复选框文本
- 改变输入的火灾功能;使用jQuery标记(复选框/文本框)
- 选中复选框文本不变
- 我怎么能得到一个复选框文本在<光>标记,并在jQuery中的另一个标签中显示
- 可能添加CSS到一些JS样式禁用复选框文本