Question

I have a situation where i have to show/Hide DIV TAG based on Checkbox selection. Below is the code example

<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>

I tried several ways but it didn’t work as i am new to jQuery, I would appreciate if someone would give me a working example for the above code .

It should by default hide div on page load and show DIV when user select the YES option in the RadioButtonList

Answer 1

Since i wanted solution using the exact HTML show in my question. SO i found a solution which is as

<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 CODE BELOW

<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-->

I also appreciate other user who also replied to my question, since i wanted solution using for ASP.NET server control.