在TextChanged或CheckedChanged事件上使用JavaScript清除兩個TextBox和checkBox

Question

清除其他兩個控件，如果第三個控件值更改 - 使用Javascript

我有兩個textBox和一個checkBox

txtExpiryDate - 使用ajaxCalenderExtender

txtDaysToExpire

chkExpired --checkbox

我無法修復的問題是，如果上述三個控件中的任何一個中的值發生更改（在客戶端），則應清除其他兩個控件。

就像在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>

Answer 1

如果不使用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>

Answer 2

正如@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>

或者，您可以改進邏輯，只執行一個處理每個更改的函數。

Answer 3

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