我的函数没有返回所有选中的值

Question

我正在填充 Ajax 调用的复选框列表，并且我试图获取哪些复选框已被选中并且我只获得第一个值。如果我做错了，请帮助我。

我的 HTML：

<%@ Control Language="C#"Inherits="System.Web.Mvc.ViewUserControl<EmsAdmin.Models.User>" %>
<%= Html.ValidationSummary("Edit was unsuccessful. Please correct the errors andtryagain.") %>
<% using (Html.BeginForm(null, null, FormMethod.Post, new { name = 
"VerficationForm", id = "VerficationForm" }))
 {%>
<%= Html.AntiForgeryToken() %>
<%: Model.Id %>
<h2>Go For All / Individual Brands</h2>
<p>
<input type="checkbox" id="checkBoxAllSelect" class="checkBoxAllSelect" value="All" />
All
<br />
<input type="checkbox" id="checkBox1Individual" class="checkBox1Individual" 
 value="Individual" />
 Individual
<br/>
 <input type="button" value="GetBrands" class="getBrands" />
</p>
<hr />
<h2>Multi Select Brands If Required:</h2>
 <div id="checkboxes" class ="divNewBrandsList">
 </div>
 <hr />
<h2>Countires For Each Brand:</h2>
<div id="checkboxescountries" class="divNewCountriesList">
 </div>
 <hr />
 <% } %>

脚本：

 <script type="text/javascript">
 $('.getBrands').hide();
function myBrandsfunction() {
    var selectedBrands = "";
    var manu = "";
    var input = "";
    $("#checkboxes input:checked").each(function () {
        manu = $(this).val();
        alert("Brand value:" + manu); // Here I am getting only one Selected checkbox but not all.
        selectedBrands = selectedBrands + "," + manu;
        alert("Selected brands:" + selectedBrands);
        var productInput = "";
        var myUrl = "/Countries/GetCountiresForManufacturer/" + selected + "/" + input;
        $.ajax({
            url: myUrl,
            type: 'get',
            success: function (data) {
                productInput = data;
                $(".divNewCountriesList").html(productInput);
            }
        });
    });
}

控制器：

    /// <summary>
    /// GetBrands for Organisation
    /// </summary>
    /// <returns></returns>
    [Authorize(Roles = "Administrator")]
    [AcceptVerbs(HttpVerbs.Get)]
    public string GetBrandsForOrganisation(string organisation)
    {
        var sb = new StringBuilder();
       // var brandsList = new List<String>();
        if (organisation == null)
        {
            return "";
        }
        else
        {
            var corporation = _corporationRepository.GetCorporationByName(organisation);
            if (corporation != null)
            {
                // Get Manufactuerers 
                var brands = _corporationManufacturerRepository.GetAllManufacturersForCorporation(corporation.Id);

                sb.Append("<div id = \"" + organisation + "\">");
                foreach (var brand in brands)
                {
                    sb.Append("<input id =\"" + brand.Manufacturer.Id +
                              "\" type=\"checkbox\" class=\"checkboxBrand\" value=\"" +
                              brand.Manufacturer.Description + "\"/>" + brand.Manufacturer.Description);
                    sb.Append("<br />");
                }
                sb.Append("<br />");
                sb.Append("</div>");
            }

        }
        sb.Append("<input type=\"button\" value=\"GetCountries\"  onclick = \"myBrandsfunction()\"class=\"brands\"/>");

        return sb.ToString();
    }

Answer 1

我相信您遇到的问题是它正在更新所有内容，但只有最后一个还活着，因为您不断用您最后的回复替换 .divNewCountriesList 的 html。您可能需要构建一个数组/长字符串：

var checkedItems = $("#checkboxes input:checked");

var productInputList = []; 

checkedItems.each(function (index,element) {
    manu = $(this).val();
    alert("Brand value:" + manu); // Here I am getting only one Selected checkbox but not all.
    selectedBrands = selectedBrands + "," + manu;
    alert("Selected brands:" + selectedBrands);
    var productInput = "";
    var myUrl = "/Countries/GetCountiresForManufacturer/" + selected + "/" + input;


    $.ajax({
        url: myUrl,
        type: 'get',
        success: function (data) {
            productInput = data;
            productInputList.push(productInput);
            if (index == checkedItems.length - 1) {
                //Reached end of list... populate
                $(".divNewCountriesList").html(productInputList.join(' '));
            }
        }
    });
});

或者，您可以按照here 的建议使用 deferred 来避免混乱的索引检查/很棒。

Answer 2

问题可能是：

你有一个：

$("#checkboxes input:checked") 

....但是您的 div 看起来像...

<div id="checkboxes" class ="divNewBrandsList">

这是一个 id 问题...尝试更改复选框的 id。

======================更新======================

这似乎也很奇怪：

 //This line is storing just one value and its normal
 manu = $(this).val(); 

但重要的部分是 foreach 循环中的 .ajax 调用，只是，为什么？ ... url中的输入get值也是空的。

这里：

var myUrl = "/Countries/GetCountiresForManufacturer/" + selected + "/" + input;