RadioButtonList를 사용하여 테이블의 가시성을 변경하십시오.

라디오 버튼 목록이 있습니다. 나는 RadioButtonList에서 볼 수 옵션을 선택하면 RadioButtonList를 사용하여 테이블의 가시성을 변경하십시오.

<asp:RadioButtonList ID="ChangeVisibilityRadioButtonList" runat="server" 
TextAlign="Right" RepeatDirection="Horizontal" CssClass="cb"> 
</asp:RadioButtonList>

하고 코드 부분에서

 ChangeVisibilityRadioButtonList.Items.Add(new ListItem("Visible", "visible")); 
     ChangeVisibilityRadioButtonList.Items.Add(new ListItem("Hidden", "hidden")); 
     ChangeVisibilityRadioButtonList.SelectedIndex = 0;

이 내 테이블,

<table align="center" runat="server" id="OdemeTable" visible="false"> 
    <tr> 
      <td> 
       Hello world! 
      </td> 
    </tr> 
</table>

, 나는 OdemeTable 동적으로 표시하고 싶지만 RadioButtonList에서 숨겨진 선택 인 경우 OdemeTable이 없어야합니다. 어떻게하면 자바 스크립트로 이것을 할 수 있습니까?

출처

2012-06-04 Bonus Kun

당신은 jQuery를 사용할 수 있습니다 그게 모든 클라이언트 측에 렌더링되지 않음을 의미하기 때문에 당신이 서버 측에서 기본적으로 테이블 Visible=false을해서는 안

<head runat="server"> 
    <title></title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
</head> 

<form id="form1" runat="server"> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#ChangeVisibilityRadioButtonList').click(function() { 
       if ($("#ChangeVisibilityRadioButtonList input:radio:checked").val() == 'hidden') { 
        document.getElementById('OdemeTable').style.display = "none"; 
       } 
       else { 
        document.getElementById('OdemeTable').style.display = ""; 
       } 
      }); 
     }); 
    </script> 


    <asp:RadioButtonList ID="ChangeVisibilityRadioButtonList" runat="server" 
     TextAlign="Right" RepeatDirection="Horizontal" CssClass="cb"> 
     <asp:ListItem Text="Visible" Value="visible"></asp:ListItem> 
     <asp:ListItem Text="Hidden" Value="hidden"></asp:ListItem> 
    </asp:RadioButtonList> 
    <table align="center" id="OdemeTable" style="display:none" > 
    <tr> 
      <td> 
       Hello world! 
      </td> 
    </tr> 
    </table>  
</form>

참고. 그래서 당신은 그것을 보이게 할 수 없을 것입니다. 따라서 나는 style="display:none"을 사용했습니다.

출처

2012-06-04 10:40:48

그냥 @로 : 1) 당신은 JS에서 RUNAT = "서버"컨트롤의 ID를 걱정해야 asp.net을 사용할 때. 서버가 어떤 경우에 다른 ID를 생성합니다 (UserControls, ...) 2)이 때문에 테이블 runat = "server"(@Mehmet)을 작성하면 안됩니다. 코드가 필요 없으면 컨트롤을 runat = "server"로 만들지 않는 것이 좋습니다! –

@DominikKirschenhofer : 내 테이블은'runat = server'가 아닙니다. OP가 서버 측에서 액세스해야하는 경우 ['ClientIdMode = Static'] (http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx)를 사용해야합니다. –

Linkebreak를하고 싶고 주석을 수정하고 싶었던 "RETURN"을 미안 해요. Porry : P ClientIdMode = Static은 옵션입니다.하지만 Static은 옵션이지만 다른 곳에서 사용되는 다른 컨트롤에서 동일한 ID를 사용하지 않도록주의하십시오. 같은 시간! –

여기에 코드입니다

자바 스크립트

function HideTable() { 
      var RB1 = document.getElementById("<%=ChangeVisibilityRadioButtonList.ClientID%>"); 
      var radio = RB1.getElementsByTagName("input"); 

      var tbl = document.getElementById("<%=OdemeTable.ClientID%>"); 

      var selval; 

      for (var i = 0; i < radio.length; i++) { 
       if (radio[i].checked) { 
        selval = radio[i].value; 
       } 
      } 

      if (selval == 'Visible') { 
       document.getElementById("<%=OdemeTable.ClientID%>").style.display = ''; 
      } 
      else { 
       document.getElementById("<%=OdemeTable.ClientID%>").style.display = 'none'; 
      } 

     }

ASPX

<asp:RadioButtonList ID="ChangeVisibilityRadioButtonList" runat="server" onchange="HideTable();" TextAlign="Right" 
        RepeatDirection="Horizontal" > 
        <asp:ListItem Value="Visible" Text="Visible"></asp:ListItem> 
        <asp:ListItem Value="Hidden" Text="Hidden"></asp:ListItem> 
       </asp:RadioButtonList> 
       <table align="center" runat="server" id="OdemeTable"> 
        <tr> 
         <td> 
          <b>Hello world!</b> 
         </td> 
        </tr> 
       </table>

출처

2012-06-04 10:59:19 bvr

나는 어떤 이유로 든 작동시키지 못했습니다. 고맙습니다 ... –

RadioButtonList를 사용하여 테이블의 가시성을 변경하십시오.

답변

관련 문제