如何从复选框列表中获取复选框的值在MVC中使用jquery ajax

Question

我在mvc 5中有一个checkboxlistfor控件，想要选定的复选框的值，一旦获得该值，然后发送ajax请求并按id提取数据，下面是实现类似功能的参考链接，在此已针对多个复选框使用“ for循环”，而我正在使用checkboxlistfor，因此无法获取所选复选框的值。

“ https://forums.asp.net/t/2078931.aspx?How+to+get+data+from+checkbox+list+using+jquery+ajax+in+MVC+ ”

以下是我用于绑定复选框列表的代码

视图

@Html.CheckBoxListFor(model => model.sbuIDs, 
                      model => model.Availablesbu,
                      sb => sb.sbuID,
                      sb => sb.sbuName,
                      model => model.Selectedsbu,
                      htmlListInfo)

控制器代码

[HttpGet]
public ActionResult AddUsers()
{
    var Uvm = new UsersViewModel();

    var Selectedsbu = new List<sbu>();
    Uvm.Availablesbu = _User.Getallsbu();
    Uvm.Selectedsbu = Selectedsbu;
    return View(Uvm);
}

public class sbu
{
    public int UserID { get; set; }
    public int sbuID { get; set; }
    public string sbuName { get; set; }
}

public class UsersViewModel()
{
    public IEnumerable<sbu> sbu = null;
    sbu = new List<sbu>();
    public IEnumerable<sbu> Availablesbu { get; set; }
    public IEnumerable<sbu> Selectedsbu { get; set; }
    public string[] sbuIDs { get; set; }
}

更新

以下是我将使用的ajax请求：

<script>
    $("#CheckBoxListFor").change(function () {
        debugger;
        var favorite = [];
        $.each($("input[name='sbuIDs']:checked"), function () {
            favorite.push($(this).val());
        });

        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            url: '@Url.Action("Getvalues", "Home")',

            data: JSON.stringify({ values: favorite })
        });

    });
</script>

控制器代码

public JsonResult Getvalues(string[] values)
{
    //
}

Answer 1

以HTML呈现的复选框列表将具有一个共享名称，但是将具有不同的ID，即名称后跟一个-和标识索引的数字。

您可以使用jQuery获取所选列表。

$('[name="checkBoxListName"]:checked');

要获取其值的数组：

var values = $('[name="checkBoxListName"]:checked').get();

您的示例脚本应该可以进行一些小的更改。 1）使用名称选择器，因为您的复选框将具有不同的ID。 2）将代码包装在$(document).ready 。 3）只发布原始对象而不是字符串：

<script>
$(document).ready(function() {
    $("[name='checkBoxListName']).change(function () {
        // code here.
        data: { values: favorite }
    });
 });
</script>

Answer 2

以下是我使用的ajax请求

<script>
                            $("#CheckBoxListFor").change(function () {
                                debugger;
                                var favorite = [];
                                $.each($("input[name='sbuIDs']:checked"), function () {
                                    favorite.push($(this).val());
                                });

                                $.ajax({
                                    type: "POST",
                                    dataType: "json",
                                    contentType: "application/json",
                                    url: '@Url.Action("Getvalues", "Home")',

                                    data: JSON.stringify({ values: favorite })
                                });

                            });



                        </script>

控制器代码

 public JsonResult Getvalues(string[] values)
    {

....}