Скрыть / показать тег Div на основе выбранного значения RadioButtonList - PullRequest
Новая
       3

Скрыть / показать тег Div на основе выбранного значения RadioButtonList

0 голосов
/ 03 ноября 2011

У меня есть ситуация, когда мне нужно показать / скрыть DIV TAG на основе выбора флажка. Ниже приведен пример кода 

<asp:RadioButtonList ID="ckbRestaurent" runat="server"  RepeatDirection="Horizontal" RepeatLayout="Flow" >   
     <asp:ListItem selected="true" Value="0">No</asp:ListItem>  
     <asp:ListItem Value="1">Yes</asp:ListItem> 
</asp:RadioButtonList>

<div id="xyz"> something.. </div>

Я пробовал несколько способов, но это не сработало, так как я новичок в jQuery, я был бы признателен, если бы кто-нибудь дал мне рабочий пример для приведенного выше кода.

По умолчанию он должен скрывать div при загрузке страницы и показывать DIV, когда пользователь выбирает опцию YES в RadioButtonList

Ответы [ 4 ]

2 голосов
/ 07 ноября 2011

Так как я хотел найти решение, используя точное HTML-шоу в моем вопросе. Так что я нашел решение, которое выглядит как 

<script language="javascript" type="text/javascript">
   $(document).ready(function () {
     $('#RadioDiv input').click(function () {
     $("#info").text('Selected Value: ' + $("#RadioDiv input:radio:checked").val());
         if ($("#RadioDiv input:radio:checked").val() == 0) {
              document.getElementById('Restaurent').style.display = "none";
              }
              else {
              document.getElementById('Restaurent').style.display = "";
                    }
       });
     }); 
</script>

HTML-код НИЖЕ 

<div id="RadioDiv">
<asp:RadioButtonList ID="ckbRestaurent" runat="server"  RepeatDirection="Horizontal" RepeatLayout="Flow" >   
  <asp:ListItem selected="true" Value="0">No</asp:ListItem>  
  <asp:ListItem Value="1">Yes</asp:ListItem> 
</asp:RadioButtonList>
</div>
<table class="style1">
      <tr>
         <td ></td><td></td>
      </tr>
      <tr><td ></td><td></td>
       </tr>
</table>
    </br>
<div id="Restaurent" style="display:none" >
<!-- Details Group Restaurent Table -->
<table cellpadding="0" cellspacing="0" class="tableDetailsGroupOne">
  <tr>
      <td class="tableDetailsGroupOneLabel">Restaurant One:</td>
      <td>
      <asp:TextBox ID="txtRestaurentOne" runat="server" CssClass="txtNameOfHotel">Restaurent One</asp:TextBox>
      </td>
</tr>
<tr>
      <td class="tableDetailsGroupOneLabel">Restaurent Two:</td>
      <td>
<asp:TextBox ID="txtRestaurentTwo" runat="server" CssClass="txtNameOfHotel" ></asp:TextBox>
      </td>
</tr>
</table>
</div>
<!-- Details Group Restaurent Table END-->

Я также ценю другого пользователя, который также ответил на мой вопрос, поскольку я хотел использовать решение для управления сервером ASP.NET.

0 голосов
/ 03 ноября 2011

попробуйте этот код 

$(document).ready(function(){ 
        $("#xyz").hide();
        $("input[type=checkbox]").click(function (){
            if ($(this).attr('checked')){
                $("#xyz").show();
            }
            else {
                $("#xyz").hide();
            }
        });

    });

и добавьте ваш HTML-код, чтобы мы могли изменить приведенный выше скрипт

0 голосов
/ 03 ноября 2011

Я добавляю версию HTML, как вы упомянули.попробуй понять и дай мне знать. 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        $("#xyz").hide();
        $("input[type=checkbox]").click(function (){            
            if ($(this).val()=='0' && $(this).attr('checked')){
                $("#xyz").show();
            }
            else {
                $("#xyz").hide();
            }
        });

    });
</script>
</head>
<body>
<input type="checkbox" value="0">yes
<input type="checkbox" value="1">no
<div id="xyz"> something.. </div> 
</body>
</html>
0 голосов
/ 03 ноября 2011

вам нужно подключить клиентский вызов javascript к вашему RadioButtonList. в функции javascript вы можете сделать что-то вроде $ ("# xyz"). hide () или $ ("# xyz"). show ()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...