使用 jQuery AJAX 填充 ASP.Net CheckBoxList ClientSide答案

【问题标题】：Populate ASP.Net CheckBoxList ClientSide using jQuery AJAX使用 jQuery AJAX 填充 ASP.Net CheckBoxList ClientSide
【发布时间】：2017-11-30 23:15:43
【问题描述】：

我正在按照http://www.aspforums.net/Threads/120224/Populate-ASPNet-CheckBoxList-ClientSide-using-jQuery-AJAX/中的说明进行操作

这确实会填充复选框列表，但是单击的任何标签都会选中或取消选中复选框列表中的第一项。如何修复代码以让“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);
                }
            });
        }

【问题讨论】：

能否请您将 ASP 转换为 HTML，以便我们有一个 minimal reproducible example？
上面的网址是我使用的aspforums.net/Threads/120224/…
您需要在追加行之前设置标签的“for”属性，您正在克隆并一遍又一遍地使用具有相同属性的相同元素。
你能告诉我那会是什么样子吗？

标签： javascript c# jquery asp.net vb.net

【解决方案1】：

下面是答案。 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;
        }

【讨论】：