javascript - 使用 javascript 根据 RadioButtonList 选择的值显示/隐藏 div 控件

Question

我正在尝试使用 JavaScript 根据 RadioButtonList 选定的值使 div 控件可见/不可见。

div体现在FormView中:

<asp:FormView ID="fv" runat="server" DataKeyNames="RootId"
DataSourceID="SomeDataSource" DefaultMode="Edit">

<EditItemTemplate>
    <div class="SubTitle">
        Fees
    </div>
    <table cellpadding="0" cellspacing="0" border="0" class="FormTable">
        <tr>
            <td class="FirstColumn">
                <table cellpadding="0" cellspacing="0" border="0" class="FormTable">
                    <tr>
                        <td>
                            <asp:RadioButtonList ID="ftCtrl" runat="server" DataSource='<%# Eval("ftList") %>'
                                DataValueField="Key" DataTextField="Value" SelectedValue='<%# Bind("ft") %>'/>

                        </td>
                    </tr>
                    <tr>


               <div runat="server" id="BreakdownDiv"  style="display:none" >
                   ...

这是脚本:

<script type="text/javascript">

$('#<%= fv.FindControl("ftCtrl").ClientID %>').find('input:radio').click(function() {
    var Br = $('#<%= fv.FindControl("BreakdownDiv").ClientID %>');

    if ($(this).next().html() == 'New') {
        Br.show('slow');
    }
    else  {
        Br.hide('slow');
    }
});

这是生成的 HTML:

<script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript">
              $('#ctl00_ContentAreaMain_fv_Inv1_fv_BreakdownDiv').find('input:radio').click(function() {
    var Br = $('#ctl00_ContentAreaMain_fv_Inv1_fv_BreakdownDiv');

    if ($(this).next().html() == 'New') {
        Br.show('slow');
    }
    else  {
        Br.hide('slow');
    }
});
</script>                            

<table cellspacing="0" clientIDMode="static" border="0"   id="ctl00_ContentAreaMain_fv_Inv1_fv" style="border-  collapse:collapse;"> 
.
.
.
<div id="ctl00_ContentAreaMain_fv_Inv1_fv_BreakdownDiv" style="display:none">

调试脚本我可以看到 div 控件被发现，但没有任何反应 - 当检查不同的单选按钮时，它没有被隐藏或显示。 有人知道我做错了什么吗？

终于找到问题所在了。

我试图隐藏/显示包含的表格，但由于某种原因，表格内容没有隐藏/显示。我做了一些重组，删除了 div 并在 table 本身上显示/隐藏。

感谢大家的评论。希望这对将来的人有帮助。

Answer 1

下面是根据值选择隐藏和显示 div 的示例代码。
OWNER 在这里用作常量，其值为“Owner”。

   $(":radio[id*=rbl_saleby]").change(function () {
     var fetcheddata = $(".mainContainer").find("#saleby").find(":radio[id*=rbl_saleby]:checked").val();
                if (fetcheddata == OWNER)
       {       
                    $("#saleby").show();
                    $("#salebyowner").show();
                    $("#salebyALA").hide();
        }
    });