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(' '));
            }
        }
    });
});

或者你可以使用deferred建议here来避免凌乱的索引检查/太棒了。

Answer 2

可能是问题是：

你有一个：

$("#checkboxes input:checked")

....但你的div看起来像......

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

这是一件很重要的事情......尝试更改复选框的ID。

===================== UPDATE ======================

这似乎很奇怪：

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

但重要的部分是foreach循环中的.ajax调用，为什么？ ...网址中的输入获取值也是空的。

这里：

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

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

2 个答案: