Javascript 使用jQuery AJAX填充ASP.Net CheckBoxList客户端

我正在遵循在上找到的说明

这会填充复选框列表，但是单击的任何标签都会选中或取消选中复选框列表中的第一项。如何修复代码，使“for”标签指向正确的复选框 JavaScript返回xml

 <asp:CheckBoxList ID="chkaddressemails" Width="300px" runat="server">
 </asp:CheckBoxList>



 function GetDropDownData(o) {

            var ddlTestDropDownListXML = document.getElementById(o.id);


            // Provide Some Table name to pass to the WebMethod as a parameter.
            var tableName = ddlTestDropDownListXML.options[ddlTestDropDownListXML.selectedIndex].value;


            $.ajax({
                type: "POST",
                url: "Reports.aspx/GetDropDownItems",
                data: '{tableName: "' + tableName + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {

                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var customers = xml.find("Table1");
                    var row = $("[id*=chkaddressemails] tr:last-child").clone(true);
                    $("[id*=chkaddressemails] tr").remove();
                    $.each(customers, function () {
                        var customer = $(this);

                        $("input", row).val($(this).find("Email").text());
                        $("label", row).html($(this).find("Grouping").text()); 

                        $("[id*=chkaddressemails] tbody").append(row);
                        row = $("[id*=chkaddressemails] tr:last-child").clone(true);

                    });
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        }

函数GetDropDownData（o）{
var ddlTestDropDownListXML=document.getElementById（o.id）；
//提供一些表名作为参数传递给WebMethod。
var tableName=ddletsdropdownlistxml.options[ddletsdropdownlistxml.selectedIndex].value；
$.ajax({
类型：“POST”，
url:“Reports.aspx/GetDropDownItems”，
数据：'{tableName:'+tableName+''''}'，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（响应）{
var xmlDoc=$.parseXML（response.d）；
var xml=$（xmlDoc）；
var customers=xml.find（“表1”）；
var row=$（“[id*=chkaddressemails]tr:last child”）.clone（true）；
$（“[id*=chkaddressemails]tr”）.remove（）；
$。每个（客户、职能部门）{
var customer=$（此值）；
$（“input”，row）.val（$（this.find）（“Email”）.text（））；
$（“label”，row.html（$（this.find）（“Grouping”）.text（））；
$（“[id*=chkaddressemails]tbody”）.append（行）；
行=$（“[id*=chkaddressemails]tr:last child”）.clone（true）；
});
},
故障：功能（响应）{
警报（response.d）；
}
});
}

下面是答案。ajax调用一个静态函数，该函数返回转换为xml的数据表。 然后清除旧数据并重新填充复选框列表。我还获取值并将其放入文本框中

<asp:DropDownList ID="ddladdresscustomers" Width="300px" AutoPostBack="false" onchange="GetDropDownData(this);" runat="server"></asp:DropDownList>

     function GetDropDownData(o) {

            var ddlTestDropDownListXML = document.getElementById(o.id);


            // Provide Some Table name to pass to the WebMethod as a parameter.
            var tableName = ddlTestDropDownListXML.options[ddlTestDropDownListXML.selectedIndex].value;


            $.ajax({
                type: "POST",
                url: "Reports.aspx/GetDropDownItems",
                data: '{tableName: "' + tableName + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {

                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var customers = xml.find("Table1");

                    var table = $('<table></table>');
                    var counter = 0;
                    var customer = $(this);
                    $.each(customers, function () {




                        table.append($('<tr></tr>').append($('<td></td>').append($('<input>').attr({
                            type: 'checkbox', name: 'chklistitem', value: $(this).find("Email").text(), id: 'chklistitem' + counter
                        })).append(
                        $('<label>').attr({
                            for: 'chklistitem' + counter++
                        }).text($(this).find("Grouping").text()))));
                    });

                    var y = $('#<%= chkaddressemails.ClientID %>');   
                    getallfromcheckbox();
                    removeCheckBoxItem();
                    y.append(table);

                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        }

function removeCheckBoxItem()
{



    $("[id*=chkaddressemails] :checkbox").parent().remove();

}
        function getallfromcheckbox()
{
            var retur = '';

                var y = $('#<%= txtaddressemail.ClientID %>');
            var names = [];
            $('[id*=chkaddressemails] input:checked').each(function () {
                names.push(this.name);

                retur += (this.value) +';';

            });


            document.getElementById("<%= txtscheduleemail.ClientID %>").value = retur;
        }

函数GetDropDownData（o）{
var ddlTestDropDownListXML=document.getElementById（o.id）；
//提供一些表名作为参数传递给WebMethod。
var tableName=ddletsdropdownlistxml.options[ddletsdropdownlistxml.selectedIndex].value；
$.ajax({
类型：“POST”，
url:“Reports.aspx/GetDropDownItems”，
数据：'{tableName:'+tableName+''''}'，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（响应）{
var xmlDoc=$.parseXML（response.d）；
var xml=$（xmlDoc）；
var customers=xml.find（“表1”）；
变量表=$（''）；
var计数器=0；
var customer=$（此值）；
$。每个（客户、职能部门）{
table.append（$（''）.append（$（''）.append（$（''）.attr({
键入：“复选框”，名称：“chklistitem”，值：$（this）.find（“Email”）.text（），id:“chklistitem”+计数器
})).附加(
$（''）.attr({
对于：'chklistitem'+计数器++
}).text（$（this.find（“分组”）.text（））；
});
变量y=$（“#”）；
getallfromcheckbox（）；
移除checkboxitem（）；
y、 附加（表）；
},
故障：功能（响应）{
警报（response.d）；
}
});
}
函数removeCheckBoxItem（）
{
$（“[id*=chkaddress]：复选框”）.parent（）.remove（）；
}
函数getallfromcheckbox（）
{
var-retur=''；
变量y=$（“#”）；
变量名称=[]；
$（'[id*=chkaddressemails]输入：选中'）。每个（函数（）{
name.push（this.name）；
retur+=（this.value）+'；'；
});
document.getElementById（“”）.value=retur；
}

请您将ASP展平为HTML，这样我们就有了一个新的页面。上面的url是我正在使用的。您需要设置标签的“for”属性，然后再添加行，您正在克隆并反复使用具有相同属性的相同元素。您能告诉我这是什么样子吗？