0

3 番目のコントロールの値が変更された場合は、他の 2 つのコントロールをクリアします -- Javascript を使用

私は2つのテキストボックスとチェックボックスを持っています

txtExpiryDate -- ajaxCalenderExtender を使用

txtDaysToExpire

chkExpired --チェックボックス

私が修正できない問題は、 上記の 3 つのコントロールのいずれかの値が (クライアント側で) 変更された場合、他の 2 つをクリアする必要があることです..

で日付が選択されている場合と同様に、txtExpiryDate他の 2 つのコントロールの値は次のようにクリアする必要が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次のコードを含むあなたのコードは私にとってはうまくいきました..3
つすべてが他の2つをクリアする必要があり、チェックボックスが上記のコードで必要な方法で機能しなかったため..だから、逆に行かなければならなかった..とにかく次のコードは私にとってはうまくいきました..これで、選択されていないもの（3つのコントロールのうち）の両方
が クリアされます

もう一度ありがとう..!

     <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 に答える
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>

または、ロジックを改善して、すべての変更を処理する関数を 1 つだけ実行することもできます。

于 2012-05-18T13:32:17.017 に答える