如何为radcombobox的项目模板中的复选框编写Java脚本

Question

实际上在我的radcombobox我采取一个模板在该模板我采取三个控件复选框和链接按钮和图像按钮。我将用户名绑定到linkbutton。通过radcombobox的itemcommand事件，我在图像的位置显示状态，一切都很好，但我的问题是，当我检查组合框中五个用户中的两个用户的复选框，同时关闭radcombobox，我想在组合框中选择用户的名称，用逗号分隔(，)是可能的下面是我的代码

<telerik:RadComboBox ID="rdPhysicianscmb" runat="server" Width="75%"
     DataSourceID="sdsAttachedUsers"  Filter="Contains" Font-Size="14pt"
     onitemdatabound="rdPhysicianscmb_ItemDataBound" 
     OnClientDropDownClosed="HandleClose" LoadingMessage="Loading..." 
     EmptyMessage="All Providers">
     <ItemTemplate>
          <asp:CheckBox ID="chk" Width="10px" runat="server"/>
          <asp:Image Visible="false" ID="ImgAway" runat="server" 
               ImageUrl='images/imgAway.png' Style="height: 25px; width: 25px;"/>
          <asp:LinkButton ID="lblphyname" runat="server"  CommandName="Selected" 
               ForeColor="#0489B5" Font-Size="11pt"
               CommandArgument='<%# Eval("AssignedTo") %>'  onclick="lblphyname_Click" 
               Text='<%# Eval("FullName") %>' Font-Underline="false" 
                Font-Overline="false">
          </asp:LinkButton>      
      </ItemTemplate>
 </telerik:RadComboBox>

Answer 1

请尝试使用下面的代码片段。

。ASPX

        <telerik:RadComboBox ID="ddlEducationPeriod" runat="server" EmptyMessage="--Select education period--"
        HighlightTemplatedItems="true" SkinID="DropDownList194*200" AllowCustomText="true">
        <HeaderTemplate>
            <asp:CheckBox ID="chkSelectAll" runat="server" onClick="EducationHeaderCheckChanged();" />
            <asp:Label runat="server" ID="lblTeacherSelectAll" Text="Select All" AssociatedControlID="chkSelectAll"></asp:Label>
        </HeaderTemplate>
        <ItemTemplate>
            <div onclick="StopPropagation(event)">
                <asp:CheckBox runat="server" ID="chkddlID" onclick="onCheckBoxClickEducation(this)"
                    Text='<%#Eval("Name") %>' />
                <asp:Label runat="server" ID="labelddlID" Text='<%#Eval("ID") %>' Visible="false"></asp:Label>
            </div>
        </ItemTemplate>
    </telerik:RadComboBox>

.ASPX.CS

protected void Page_Load(object sender, EventArgs e)
    {
        dynamic data = new[] {
          new { ID = 1, Name ="aaa"},
          new { ID = 2, Name = "bbb"},
          new { ID = 3, Name = "ccc"},
          new { ID = 4, Name = "ddd"},
          new { ID = 5, Name ="eee"},
          new { ID = 6, Name ="aaa"},
          new { ID = 7, Name = "bbb"},
          new { ID = 8, Name = "ccc"},
          new { ID = 9, Name = "ddd"},
          new { ID = 10, Name ="eee"}
        };
        ddlEducationPeriod.DataSource = data;
        ddlEducationPeriod.DataTextField = "Name";
        ddlEducationPeriod.DataValueField = "ID";
        ddlEducationPeriod.DataBind();
    }

JAVASCRIPT

            function onCheckBoxClickEducation(chk) {
            var combo = $find("<%= ddlEducationPeriod.ClientID %>");
            //prevent second combo from closing
            cancelDropDownClosing = true;
            //holds the text of all checked items
            var text = "";
            //holds the values of all checked items
            var values = "";
            //get the collection of all items
            var items = combo.get_items();
            //enumerate all items
            for (var i = 0; i < items.get_count(); i++) {
                var item = items.getItem(i);
                //get the checkbox element of the current item
                var chk1 = $get(combo.get_id() + "_i" + i + "_chkddlID");
                if (chk1.checked) {
                    text += item.get_text() + ", ";
                    values += item.get_value() + ",";
                }
            }
            //remove the last comma from the string

            text = removeLastComma(text);
            values = removeLastComma(values);

            if (text.length > 0) {
                //set the text of the combobox
                combo.set_text(text);
                //update the treeview in the second combobox
            }
            else {
                //all checkboxes are unchecked
                //so reset the controls
                combo.set_text("");
            }
        }
        function StopPropagation(e) {
            e.cancelBubble = true;
            if (e.stopPropagation) {
                e.stopPropagation();
            }
        }
        function EducationHeaderCheckChanged() {
            var headerchk = document.getElementById('ddlEducationPeriod_Header_chkSelectAll');
            onCheckBoxClickSelectAll(headerchk.checked, "ddlEducationPeriod");
        }
        function onCheckBoxClickSelectAll(headerchk, combo) {
            var combo = $find("<%= ddlEducationPeriod.ClientID %>");
            cancelDropDownClosing = true;
            //holds the text of all checked items
            var text = "";
            //holds the values of all checked items
            var values = "";
            //get the collection of all items
            //enumerate all items
            var items = combo.get_items();
            for (var i = 0; i < items.get_count(); i++) {
                var item = items.getItem(i);
                //get the checkbox element of the current item
                var chk1 = $get(combo.get_id() + "_i" + i + "_chkddlID");
                chk1.checked = headerchk;
                if (chk1.checked) {
                    text += item.get_text() + ", ";
                    values += item.get_value() + ",";
                }
            }
            //remove the last comma from the string
            text = removeLastComma(text);
            values = removeLastComma(values);
            if (text.length > 0) {
                //set the text of the combobox
                combo.set_text(text);
            }
            else {
                //all checkboxes are unchecked
                //so reset the controls 
                combo.set_text("");
            }
        }
        function removeLastComma(str) {
            return str.slice(0, -2);
        }