In this article I will explain with an example, how to get values of checked (selected) CheckBoxes using jQuery in ASP.Net Core MVC.
 
 
Namespaces
You will need to import the following namespace.
using Microsoft.AspNetCore.Mvc.Rendering;
 
 
Model
This article uses SelectListItem class as Model which is an in-built ASP.Net Core MVC class. It has all the properties needed for populating a CheckBoxList.
 
 
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, a generic list of SelectListItem class is created with some Fruit values.
The Fruit Name is stored in the Text property while the Fruit Id is stored in the Value property.
Finally, the list of Fruits is returned to the View.
public class HomeController : Controller
{
    public IActionResult Index()
    {
        List<SelectListItem> items = new List<SelectListItem>();
        items.Add(new SelectListItem { Text = "Mango", Value = "1" });
        items.Add(new SelectListItem { Text = "Orange", Value = "2" });
        items.Add(new SelectListItem { Text = "Banana", Value = "3" });
        items.Add(new SelectListItem { Text = "Apple", Value = "4" });
        items.Add(new SelectListItem { Text = "Papaya", Value = "5" });
        return View(items);
    }
}
 
 
View
Inside the View, in the very first line the generic list of SelectListItem class is declared as Model for the View.
Populating List of CheckBoxes
Inside the View, a loop is executed over the generic list of SelectListItem class which in turn generates a list containing HTML CheckBoxes and HTML Label elements.
Below the CheckBoxes, there is a Submit Button.
 
Displaying checked (selected) values using jQuery
Inside the jQuery document.ready event handler, the Submit Button has been assigned with a jQuery click event handler.
When the Submit Button is clicked, a loop is executed over all the CheckBoxes and if the CheckBox is checked its Text part is appended to a JavaScript variable message.
Finally, the selected Fruit names are displayed using JavaScript Alert Message Box.
@model List<SelectListItem>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
    </style>
</head>
<body>
    <table id="tblFruits">
        @foreach (var fruit in Model)
        {
            <tr>
                <td><input id="@fruit.Value" type="checkbox" name="Fruit" value="@fruit.Value" checked="@fruit.Selected" /></td>
                <td><label for="@fruit.Value">@fruit.Text</label>td>
            </tr>
        }
    </table>
    <br/>
    <input id="btnSubmit" type="button" value="Submit" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSubmit").click(function () {
                var message = "";
                $("#tblFruits input[type=checkbox]").each(function () {
                    if ($(this).is(":checked")) {
                        message += $(this).parent().next().find("label").html() + "\n";
                    }
                });
                alert(message);
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
ASP.Net Core MVC: Get values of checked (selected) CheckBoxes using jQuery
 
 
Downloads
Download Code