javascript - 标签或div将不会显示在JavaScript复选框更改事件中

我正在使用带有JavaScript和jQuery的ASP.NET Web表单构建页面。
我想做的是使复选框对复选框更改事件做出反应，如下所示：如果选中了复选框：在屏幕上显示3个标签，否则取消选中复选框：打开模式弹出窗口。

我设法使弹出窗口正常工作，但是我的标签似乎从未显示在屏幕上。我尝试在整个div元素中访问它们，并且尝试访问单个标签，但仍然不执行任何操作。

这是我的代码：

<%@ Register Src="~/Controls/BankInformation.ascx" TagName="BankInformation" TagPrefix="ABS" %>

<script type="text/javascript">
    $(document).ready(function () {
        var isDirectDebitSelected = $('#<%=chkDirectDebit.ClientID%>');
        var sameAsMerchantBankCheckbox = $('#<%=chkSameAsMerchantBank.ClientID%>');
        var sameAsMerchantBankLabel = $('#<%=txtSameAsMerchantBank.ClientID%>');
        var bankInformation = $('#<%=bankInfoDialog.ClientID%>');
        var accountInfo = $('#<%=divAccountInfo.ClientID%>');
        var ibanLabel = $('<%=lblIBAN.ClientID%>');

        function OpenDirectDebitDialog(dialogID) {
            dialogID.modal();
        }

        function ValidateAndCloseDirectDebitDialog(validationGroup, dialogID) {
            var pageValid = Page_ClientValidate(validationGroup);
            if (pageValid)
                $(dialogID).modal("hide");
        }

        $(sameAsMerchantBankCheckbox).change(function () {
            if (sameAsMerchantBankCheckbox.is(':checked')) {
                accountInfo.show();
                ibanLabel.show();
            } else {
                OpenDirectDebitDialog(bankInformation);
            }
        });

        function setSameAsMerchantVisible() {
            if (isDirectDebitSelected.is(':checked')) {
                sameAsMerchantBankCheckbox.show();
                sameAsMerchantBankLabel.show();
            } else {
                sameAsMerchantBankCheckbox.hide();
                sameAsMerchantBankLabel.hide();
            }
        }
        isDirectDebitSelected.bind('change', function () {
            setSameAsMerchantVisible();
        });

        setSameAsMerchantVisible();
    });
</script>

<asp:CheckBox runat="server" ID="chkDirectDebit" />
<asp:Label runat="server" AssociatedControlID="chkSameAsMerchantBank" ID="txtDirectDebit" meta:resourcekey="lblDirectDebit"></asp:Label>
<asp:CheckBox runat="server" ID="chkSameAsMerchantBank" AutoPostBack="False" Checked="True" />
<asp:Label runat="server" AssociatedControlID="txtSameAsMerchantBank" ID="txtSameAsMerchantBank" meta:resourcekey="lblSameAsMerchantBank"></asp:Label>

<div id="bankInfoDialog" runat="server" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h1 id="bankInformationDialogHeader"><%=GetLocalResourceObject("BankInfoHeader") %></h1>
    </div>
    <div class="modal-body">
        <ABS:BankInformation runat="server" ID="bankInformation" />
    </div>
    <div class="modal-footer">
        <asp:Button runat="server" ID="btnUpdate" meta:resourcekey="btnUpdate" />
        <button id="btnCancel" runat="server" data-dismiss="modal" aria-hidden="true"><%=GetLocalResourceObject("Cancel")%></button>
    </div>
</div>
<div id="divAccountInfo" style="visibility: hidden" runat="server">
    <asp:Label runat="server" ID="lblIBAN" meta:resourcekey="lblIBAN"></asp:Label>
    <asp:Label runat="server" ID="lblAccountNumber" meta:resourcekey="lblAccountNumber"></asp:Label>
    <asp:Label runat="server" ID="lblSwiftNumber" meta:resourcekey="lblSwiftNumber"></asp:Label>
</div>

复选框选中与直接付款复选框之前隐藏与商户银行相同的设置复选框。会导致标签不显示吗？
由于显示了模式弹出窗口，因此肯定会触发事件。

最佳答案

jQuery show / hide方法通过“ display”工作。将“可见性：隐藏”替换为“显示：无”，它将按预期工作。

 <div id="divAccountInfo" style="display: none" runat="server">
     <asp:Label runat="server" ID="lblIBAN" meta:resourcekey="lblIBAN"></asp:Label>
     <asp:Label runat="server" ID="lblAccountNumber" meta:resourcekey="lblAccountNumber"></asp:Label>
     <asp:Label runat="server" ID="lblSwiftNumber" meta:resourcekey="lblSwiftNumber"></asp:Label>
 </div>

关于javascript - 标签或div将不会显示在JavaScript复选框更改事件中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34411393/