How to get value of checkbox from checkboxlistFor using jquery ajax in MVC

Question

I have a checkboxlistfor control in mvc 5 and want the value of the selected checkbox, once I get the value then send ajax request and fetch the data as per id, below is the reference link where similar kind of functionality is achieved, in this he has used "for loop" for multiple checkboxes, and I am using checkboxlistfor, using this I am not able to get the value of the selected checkbox.

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

Below is the code I am using to bind checkboxlistfor code

view

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

controller code

[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; }
}

Update

Below is the ajax request i will use:

<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>

Controller code

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

Answer 1

Rendered in HTML a check box list will have a shared name but will have different ids being the name followed by a - and a number identifying the index.

You can use jQuery to get a list of those selected.

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

To get an array of their values:

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

Your sample script should work with some minor changes. 1) use the name selector as your checkboxes will have different ids. 2) Wrap the code in $(document).ready . 3) Just post the raw object and not a string:

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

Answer 2

Below is the ajax request i have use

<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>

Controller code

 public JsonResult Getvalues(string[] values)
    {

.... }