Блог

Главная - Вопросы по программированию - Скрыть / показать тег Div на основе выбранного значения RadioButtonList

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

#jquery #asp.net #checkbox

#jquery #asp.net #флажок

Вопрос:

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

 <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

Ответ №1:

Поскольку я хотел получить решение, используя точное отображение 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 управление сервером.

Ответ №2:

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

Ответ №3:

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

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

    });

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

Комментарии:

1. Скрипт, который вы мне дали, скрывает только DIV «XYZ» на page_load, я новичок в jQuery, и я не могу найти, где в вашем коде вы проверяете, равно ли значение флажка 0 или 1, соответственно, если значение равно 1, тогда оно должно показывать DIV, иначе скрытьDIV. Спасибо за ответ.

Ответ №4:

я добавляю 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' amp;amp; $(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>

Комментарии:

1. и, к сожалению, я не специалист .det. я могу помочь вам с jquery и html.

2. Это не поможет, так как я должен строго придерживаться <asp: RadioButtonList ID=»ckbRostaurent» runat=»server» RepeatDirection=»Horizontal» RepeatLayout=»Flow» OnClientClick =» return chkboxMeth()»> <asp: выбранный список= «true» Значение =»0″>Нет </asp:ListItem> <asp:ListItem Value=»1″> Да</asp:ListItem> </asp:RadioButtonList>

3. Нет проблем, я все еще ценю вашу помощь. Спасибо