use of PopupControlExtender in asp.net

Design the page like this

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"
    Inherits="WebUserControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<script language="javascript" type="text/javascript">
    function x()
     {
        var m = document.getElementById('<%=cbl.ClientID%>').getElementsByTagName('input');
        var p = document.getElementById('<%=cbl.ClientID%>').getElementsByTagName("label");
        var n = "";
        for (i = 0; i < m.length; i++)
            if (m[i].checked)
                n = n + p[i].innerHTML + ',';
        document.getElementById('<%=tb.ClientID%>').value = n.substring(0,(parseInt(n.length)-parseInt(1)) );

    }
</script>
<table>
    <tr>
        <td>
            <asp:TextBox ID="tb" runat="server" Width="200"></asp:TextBox><asp:ImageButton ID="imb"
                runat="server" />
            <asp:PopupControlExtender Position="Bottom" PopupControlID="pn" TargetControlID="tb"
                ID="PopupControlExtender1" runat="server">
            </asp:PopupControlExtender>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Panel ID="pn" runat="server" Width="204" BackColor="Silver" BorderWidth="1"
                BorderColor="Gray">
                <asp:CheckBoxList ID="cbl" runat="server" Width="204" Height="150" onclick="x()">
                </asp:CheckBoxList>
            </asp:Panel>
        </td>
    </tr>
</table>

C# code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class WebUserControl : System.Web.UI.UserControl
{
    DataClassesDataContext o = new DataClassesDataContext();
    protected void Page_Load(object sender, EventArgs e)
    {
        var m = from x in o.BRANs select x;
        cbl.DataSource = m;
        cbl.DataTextField = "name";
        cbl.DataValueField = "bid";
        cbl.DataBind();
    }
}