使用 jQuery AJAX 填充 ASP.Net CheckBoxList ClientSide

Posted 2023-04-12

【中文标题】使用 jQuery AJAX 填充 ASP.Net CheckBoxList ClientSide

【英文标题】：Populate ASP.Net CheckBoxList ClientSide using jQuery AJAX

【发布时间】：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”属性，您正在克隆并一遍又一遍地使用具有相同属性的相同元素。

你能告诉我那会是什么样子吗？

【参考方案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;