清除两个文本框，并使用 JavaScript 对 TextChanged 或 CheckedChanged 事件进行复选

Clear two TextBoxes and checkBox using JavaScript on TextChanged or CheckedChanged events

本文关键字：TextChanged JavaScript CheckedChanged 事件 两个 文本 清除      更新时间：2023-09-26

如果第三个控件值更改，则清除其他两个控件 - 使用 Javascript

我有两个文本框和一个复选框

txtExpiryDate--with ajaxCalenderExtender

txtDaysToExpire

chk过期 --复选框

我无法解决的问题是，如果更改了上述三个控件中的任何一个(在客户端(中的值，则应清除其他两个控件。

就像如果在txtExpiryDate中选择一个日期，其他两个控件的值应该被清除为：txtDaysToExpire.Text="";和chkExpired.Checked = false..，同样，如果chkExpired.Checked = true，那么其他两个应该被清除。希望它能清楚地理解..请查看标记

<td colspan="2" rowspan="2">
    <asp:UpdatePanel ID="upnlExpiry" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="txtExpiryDate" EventName="TextChanged" />
            <asp:AsyncPostBackTrigger ControlID="txtDaysToExpire" EventName="TextChanged" />
            <asp:AsyncPostBackTrigger ControlID="chkExpired" EventName="CheckedChanged" />
        </Triggers>
        <ContentTemplate>
            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="leftaligntxt">
                <tr>
                    <td width="44%" align="left">
                        Expiry Date
                    </td>
                    <td colspan="2">
                        <asp:TextBox ID="txtExpiryDate" runat="server"  OnTextChanged="txtExpiryDate_TextChanged"></asp:TextBox>
                        <ajaxToolkit:CalendarExtender ID="calExtExpiryDate" runat="server" Format="dd/MM/yyyy"
                            PopupButtonID="imgBtnCal" TargetControlID="txtExpiryDate">
                        </ajaxToolkit:CalendarExtender>
                        <asp:ImageButton ID="imgBtnCal" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/App_Themes/FQBlue/img/Calendar_img.png" />
                    </td>
                </tr>
                <tr>
                    <td width="44%">
                        Days to Expire
                    </td>
                    <td valign="top">
                        <asp:TextBox ID="txtDaysToExpire" runat="server" Width="80px" OnTextChanged="txtDaysToExpire_TextChanged"
                            ></asp:TextBox>
                        <ajaxToolkit:NumericUpDownExtender ID="txtDaysToExpire_NumericUpDownExtender" runat="server"
                            Maximum="15000" Minimum="0" TargetControlID="txtDaysToExpire" Width="100">
                        </ajaxToolkit:NumericUpDownExtender>
                    </td>
                    <td>
                        <asp:CheckBox ID="chkExpired" runat="server" Text="Show Expired" AutoPostBack="True"
                            OnCheckedChanged="chkExpired_CheckedChanged" />
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td colspan="2">
                        &nbsp;
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</td>

如果不使用 AutoPostBack：

<asp:TextBox ID="txtDaysToExpire" runat="server" Width="80px" onchange="tValue(this)">   </asp:TextBox>
<asp:TextBox ID="txtTest" runat="server" Text="blah blah blah" />
<asp:CheckBox ID="CheckBox1" runat="server" />
 <script type="text/javascript">
  function tValue(txt)
  {
    document.getElementById('<%= txtTest.ClientID %>').value = "";
    document.getElementById('<%= CheckBox1.ClientID %>').checked = false;
  }
 </script>

如@Ashwini所述，您可以对其他人做同样的事情：

<asp:TextBox ID="txtDaysToExpire" runat="server" Width="80px" onchange="DaysToExpireChanged(this)">   </asp:TextBox>
<asp:TextBox ID="txtExpiryDate" runat="server" Text="blah blah blah" onchange="ExpiryDateChanged(this)" />
<asp:CheckBox ID="chkExpired" runat="server" onchange="ExpiredChanged" />
 <script type="text/javascript">
  function DaysToExpireChanged(txt)
  {
    document.getElementById('<%= txtExpiryDate.ClientID %>').value = "";
    document.getElementById('<%= chkExpired.ClientID %>').checked = false;
  }
  function ExpiryDateChanged(txt)
  {
    document.getElementById('<%= txtDaysToExpire.ClientID %>').value = "";
    document.getElementById('<%= chkExpired.ClientID %>').checked = false;
  }
  function ExpiredChanged(txt)
  {
    document.getElementById('<%= txtDaysToExpire.ClientID %>').value = "";
    document.getElementById('<%= txtExpiryDate.ClientID %>').value = "";
  }
 </script>

或者，您可以改进逻辑，使其只执行一个处理每个更改的功能。

@Ashwini 使用以下代码的代码对我来说效果很好。因为所有三个都应该清除其他两个，并且复选框没有按照我需要的上述代码工作。所以不得不反其道而行之。无论如何，以下代码对我来说效果很好。
现在它清除两个未选中的控件(在三个控件中(

再次感谢您..！

     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".checkCss").blur(function () {
            $(".checkCssChk input").attr("checked", false);
            $(".checkCss").not(this).val("");
        });
        $(".checkCssChk input").change(function () {
            $(".checkCss").not(this).val("");
        })
    });
</script>
    <asp:TextBox ID="txtExpiryDate" runat="server" CssClass="checkCss" onchange="tValue(this)"></asp:TextBox>
    <asp:TextBox ID="txtDaysToExpire" runat="server" Width="80px" CssClass="checkCss" onchange="t2Value(this)"> ></asp:TextBox>
    <asp:CheckBox ID="chkExpired" runat="server" Text="Show Expired" CssClass="checkCssChk" />
    <script type="text/javascript">
        function tValue(txt) {
            document.getElementById('<%= txtDaysToExpire.ClientID %>').value = "";
            document.getElementById('<%= chkExpired.ClientID %>').checked = false;
        }
        function t2Value(txt) {
            document.getElementById('<%= txtExpiryDate.ClientID %>').value = "";
            document.getElementById('<%= chkExpired.ClientID %>').checked = false;
        }
     </script>
相关文章：