0

如果第三个控件的值发生变化，则清除其他两个控件 - 使用 Javascript

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

txtExpiryDate--使用 ajaxCalenderExtender

txtDaysToExpire

chkExpired --复选框

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

就像如果在 中选择了一个日期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>
4

3 回答 3

2

如果不使用 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>
于 2012-05-18T06:00:45.673 回答
0

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

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

于 2012-05-18T13:32:17.017 回答
0

@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>
于 2012-05-21T03:45:42.333 回答