Отображение/скрытие элемента управления div в соответствии с выбранными значениями RadioButtonList с использованием javascript

Question

Я пытаюсь сделать управление div видимым/невидимым в соответствии с выбранными значениями RadioButtonList с помощью javascript.

ДИВ воплощается в 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"> 

отладка сценарий I c a видеть, что элемент управления div найден, но ничего не происходит - он не скрывается или не отображается, когда проверяются разные радиокнопки. Кто-нибудь есть идея, что я делаю неправильно?

Наконец-то выяснилось, в чем проблема.

Div Я пытался скрыть/показать содержащуюся таблицу, и по какой-то причине содержимое таблицы не было скрыто/показано. Я сделал некоторую реструктуризацию, удалил div и сделал шоу/скрылся на самом столе.

Спасибо всем за ваши комментарии. Надеюсь, что это поможет кому-то в будущем.

Answer 1

В коде CSS убедитесь, что блок DIV установлен в div{display:none}

Answer 2

только функция с 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'); 
    } 
}); 

Я не уверен, что вы можете получить текст входного радио. Вместо этого я использовал значение.

Answer 3

Вот пример кода для скрытия и отображения div на основе значения значений.
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(); 
     } 
    });