如何從復選框列表中獲取復選框的值在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)
    {

....}