基於Asp.net中的radiobuttonlist的Jquery顯示/隱藏

Question

有人可以幫助jQuery語法選擇選擇單選按鈕列表選項時執行操作嗎？ 我有一個帶有兩個選項的單選按鈕列表。 我想在選擇一個值時隱藏 div，並在選擇另一個值時顯示 div。

這工作正常，但是當值來自后面的代碼時。 它保持不變或不起作用。

這是我的 Asp.net 頁面代碼。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>       
        <div>
            <asp:Label ID="Label1" runat="server" Text="Types of Loan: " />
            <asp:RadioButtonList ID="radLoan" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" ClientIDMode="Static">
                <asp:ListItem Value="Car">Car Loan</asp:ListItem>
                <asp:ListItem Value="House">House Loan</asp:ListItem>
                <asp:ListItem Value="Others">Others</asp:ListItem>
            </asp:RadioButtonList>
            <br />
            <br />
            <div id="divOther">
                <asp:Label ID="Label2" runat="server" Text="Others: " />
                <asp:TextBox ID="txtOthers" runat="server" />
            </div>
        </div>

這是Jquery腳本...

 $(document).ready(function () {
            var radioChecked;
            $('#<%=radLoan.ClientID%>').change(function () {
                radioChecked = $("input[type='radio']:checked").val()
                if (radioChecked == "Others") {
                    $('#divOther').show();
                } else {
                    $('#divOther').hide();
                }
            });
        });

是否有任何選項可以避免在后端添加單擊/更改事件？

 radLoan.Attributes.Add("OnClick", "return radLoan_onClick(this)");

輸出圖像...

Answer 1

像這樣可能是

$(document).ready(function () {
        var radioChecked;
        radioChecked = $("#<%=radLoan.ClientID%> input:checked").val();
        if (radioChecked == "Others") {
                $('#divOther').show();
            } else {
                $('#divOther').hide();
            }
        $('#<%=radLoan.ClientID%>').change(function () {
            radioChecked = $("input[type='radio']:checked").val()
            if (radioChecked == "Others") {
                $('#divOther').show();
            } else {
                $('#divOther').hide();
            }
        });
    });