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

本文关键字：文本 控件 显示 复选框 | 更新日期: 2023-09-27 18:22:44

当选中复选框时，我使用以下JavaScript显示两个带有日历扩展程序的Textbox控件。否则，它们将被隐藏。（我隐藏了包含文本框控件的表格行。）

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

我的HTML代码在这里：

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

如果我不在Page Load方法中将表行Visble设置为false，它就会起作用。

fromDateAndToDate.Visible = false;

但默认情况下，当加载页面时，在用户决定设置日期范围（从日期到结束日期）之前，这两个日期时间选择器不应可见。任何帮助都将不胜感激。

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

不把它们作为服务器控件怎么样？您可能需要将一些asp.net控件更改为普通HTML控件。

<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>
相关文章：