选中复选框时显示文本框控件

Question

I have used the following JavaScript to display Two Textbox Controls with Calendar Extenders when CheckBox is checked. Otherwise, they will be hidden. (I hide the table row which contains Textbox controls.)

<script type="text/javascript">
function forVisibleDateChecked(sender) {
    var rowDisplay = document.getElementById('<%= fromDateAndToDate.ClientID %>');
    rowDisplay.style.display = sender.checked ? 'inline' : 'none';
}
</script>

And my HTML codes are here:

    <tr>
        <td class="style2">
            <asp:CheckBox ID="chkVisibleControls" runat="server" 
               checked="false" onclick="forVisibleDateChecked(this)" />
        </td>
    </tr>

    <tr runat="server" id="fromDateAndToDate">
        <td class="style2">
            <asp:TextBox ID="tbxSetFromDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="tbxSetFromDate_CalendarExtender" runat="server" 
                Enabled="True" TargetControlID="tbxSetFromDate">
            </asp:CalendarExtender>

            <asp:TextBox ID="tbxSetToDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="tbxSetToDate_CalendarExtender" runat="server" 
                Enabled="True" TargetControlID="tbxSetToDate">
            </asp:CalendarExtender>
        </td>
    </tr>

It is working if I don't set the table row Visble to false in Page Load Method.

fromDateAndToDate.Visible = false;

But as default, when the page is loaded, those two date time pickers should not be visible until the user decides to set date range, from date and to date. Any help will be much appreciated.

Answer 1

how about not make them as server control? You may need to change some of your asp.net control as normal HTML control.

<script type="text/javascript">
function forVisibleDateChecked() {
    var rowDisplay = document.getElementById('fromDateAndToDate');
    rowDisplay.style.display = sender.checked ? 'inline' : 'none';
}
</script>

HTML:

    <tr id="fromDateAndToDate" style="display:none">
        <td class="style2">
            <asp:TextBox ID="tbxSetFromDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="tbxSetFromDate_CalendarExtender" runat="server" 
                Enabled="True" TargetControlID="tbxSetFromDate">
            </asp:CalendarExtender>

            <asp:TextBox ID="tbxSetToDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="tbxSetToDate_CalendarExtender" runat="server" 
                Enabled="True" TargetControlID="tbxSetToDate">
            </asp:CalendarExtender>
        </td>
    </tr>