Question

我的页面上有一个复选框“cbxShowNotifications”。如果在页面加载时检查，我想显示“treeview”。

.aspx页面：

<html> 
      <body>
        <form>
           <asp:CheckBox ID="cbxShowNotifications" runat="server"/>Show Notifications
           <div id="treeview"></div>
        </form>
        <script src="../Scripts/jquery.min.js" type="text/javascript"> </script>
        <script src="../Scripts/kendo.web.min.js" type="text/javascript"> </script>
        <script src="../Scripts/NotificationsTreeView.js" type="text/javascript"> </script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                showOrHide();
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                CreateNotificationTree(<%= UserId.ToString(CultureInfo.InvariantCulture) %>);
            });
        </script>
    </body>
</html>

JavaScript文件：

function CreateNotificationTree(userId)
{
    var data = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "../api/notifications/byuserid/" + userId,
                contentType: "application/json"
            }
        },
        schema: {
            model: {
                children: "notifications"
            }
        }
    });

    $("#treeview").kendoTreeView({
        dataSource: data,
        loadOnDemand: true,
        dataUrlField: "LinksTo",
        checkboxes: {
            checkChildren: true
        },
        dataTextField: ["notificationType", "NotificationDesc"],
        select: treeviewSelect
    });

    function treeviewSelect(e)
    {
        var node = this.dataItem(e.node);
        window.open(node.NotificationLink, "_self");
    }
}

$('#cbxShowNotifications').on('change', function()
{
    debugger;
    var tview = $('#treeview');

    if ($(this).prop('checked'))
    {
        tview.show();
    }
    else
    {
        tview.hide();
    }
});

function showOrHide()
{
    debugger;
    var tview = $('#cbxShowNotifications');

    if ($(this).prop('checked'))
    {
        tview.show();
    }
    else
    {
        tview.hide();
    }
}

问题是，当页面加载并选中复选框时，树视图不可见。我做错了什么？

顺便说一句，在加载页面后，如果我取消选中该复选框，树就会消失，如果我检查它，它就会出现。

所以这只发生在页面加载时，这让我相信这是一个正在执行的问题。

Answer 1

复选框cbxShowNotifications是.net服务器控件。因此，ID不会保持不变。通过Page＆amp ;;观察ID前缀的DOM变化。控制信息，即类似于“master_ctrl_cbxShowNotifications”

的东西

我建议你为它添加一个课程＆amp;使用该类作为选择器。

<asp:CheckBox ID="cbxShowNotifications" CssClass="chkBoxNotif" runat="server"/>

$('.chkBoxNotif').on('change', function(event) {
    //Do something
});

Answer 2

在函数showOrHide

中

变化：

if ($(this).prop('checked'))

到

if ($('#cbxShowNotifications').prop('checked'))

this值不是复选框。

简单。显示在页面加载时不显示DIV的功能

2 个答案: