0

我正在尝试根据 RadioButtonList 使用 javascript 选择的值使 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 包含表格，由于某种原因，表格内容没有隐藏/显示。我做了一些重组，删除了 div 并将显示/隐藏在桌子上。

谢谢大家的意见。希望这对将来的人有所帮助。

4

3 回答 3

2

这是基于值选择隐藏和显示 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();
        }
    });
于 2013-08-23T05:15:25.997 回答
0

只有一个带有 2 个收音机和一个 div 的功能

http://jsfiddle.net/forX/WGLQx/

$("input[type=radio][name=radio1]").change(function () {
  if($(this).val()=='New')
    {
      $("div[id$=BreakdownDiv]").show('slow');
    }
    else
    {
      $("div[id$=BreakdownDiv]").hide('slow');  
    }   
});

我不确定您是否可以获得输入收音机的文本。我用价值代替。

于 2013-08-22T17:49:24.607 回答
0

在您的 CSS 代码中，确保将 div 块设置为div{display:none}

于 2013-08-22T15:59:41.807 回答