javascript - 基于 Asp.net 中单选按钮列表的 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();
            }
        });
    });