Question

I just want to Visible a Html Table(id=’xx’) when user clicked on check-box in ASP page. And once the user untick on the check-box The Table should invisible again.

<table>
    <tr>
         <td colspan='2'>
               <table id='xx'>
                      <tr>
                          <td colspan='2'>
                                Student Information :
                           </td>
                           </tr>
                           <tr>
                           <td>
                             <asp:Label ID="Label1" runat="server" Text="Select Student name :"></asp:Label>
                           </td>
                           <td>
                              <asp:DropDownList ID="DropDownList1" runat="server" Width="200px">
                                   </asp:DropDownList>
                           </td>
                       </tr>
    ...

I have tried this code:

   protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
    {

        if (CheckBox1.Checked == true)
        {
            // need a way to hide the Table id='xx' 
        }
        else {
            DropDownList1.Visible = true; // This is also not working
        }
    }

Please help me.

Answer 1

You have two options here…

1. Make the Table server control using runat = “server”
2. On Check/UnCheck the CheckBox control, set the display attribute to True/False.

Option 1 Handle at Server side

<table id='xx' runat = "server">

Now you can access the table control like below

xx.Visible  = true/false;

---

Option 2 Handle at Client Side

<asp:CheckBox onclick="return SelectChk(this);" ID="chk" ></asp:CheckBox>

JavaScript Function

<script language="javascript" type="text/javascript">
    function SelectChk(CtlId) {
        var IsChecked = document.getElementById(CtlId.id).checked;
        if (IsChecked) {
            document.getElementById(<%=xx.ClientID%>).style.display = 'block';
        }
        else{
            document.getElementById(<%=xx.ClientID%>).style.display = 'none';
        }
    }
</script>