-1

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

.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();
    }
}

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

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

因此，这只发生在页面加载时，这让我相信这是执行操作的时间问题。

4

2 回答 2

2

该复选框cbxShowNotifications是一个 .net 服务器控件。因此，ID 不会保持不变。观察 DOM 中的变化，ID 前面带有页面和控制信息，即类似于“master_ctrl_cbxShowNotifications”的内容

我建议您向其中添加一个类并将该类用作选择器。

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

$('.chkBoxNotif').on('change', function(event) {
    //Do something
});
于 2013-08-20T20:54:51.320 回答
1

在功能showOrHide

改变：

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

至

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

该this值不是复选框。

于 2013-08-20T20:57:36.227 回答