In this article I will explain with an example, how to get Text and Value of selected CheckBox using jQuery in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

Understanding the CheckBoxList on Client Side

Note: In ASP.Net MVC, there is no CheckBoxList element so you will need to run make use of LOOP and generate multiple CheckBox.
 
ASP.Net MVC: Get Selected Text and Value of CheckBoxList using jQuery
 
 

Model

You will need to import the following namespaces.
public class FruitModel
{
    public int FruitId { get; set; }
    public string Name { get; set; }
    public bool Selected { get; set; }
}
 
 

Controller

The Controller consists of following Action method.

Action method handling GET operation

Inside this Action method, a Generic List collection of FruitModel class is created.
Then, four new ListItems are added to the collection which is finally returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<FruitModel> fruits = new List<FruitModel>();
        fruits.Add(new FruitModel{ FruitId = 1, Name ="Mango", Selected = false });
        fruits.Add(new FruitModel{ FruitId = 2, Name ="Apple", Selected = false });
        fruits.Add(new FruitModel{ FruitId = 3, Name ="Banana", Selected = true });
        fruits.Add(new FruitModel{ FruitId = 4, Name ="Guava", Selected = false });
 
        return View(fruits);
    }
}
 
 

View

HTML Markup

Inside the View, the Generic List collection of FruitModel class is declared as Model for the View.
The View consists of a CheckBox and Label created using HTML.CheckBoxFor and HTML.Label respectively and also an HTML INPUT Button.
The CheckBox is populated using Model property and id and value attribute has been assigned to it with Name and FruitId property respectively.
The Label is also populated using Model property and for attribute is set with the Name property of the Model.
 
Inside the HTML Markup, the following script file is inherited.
1. jquery.min.js
 
Inside the document ready event handler, the Get Selected Item Button has been assigned with a jQuery click event handler.
When Get Selected Items Button is clicked, first the references of the checked CheckBoxes are determined.
A FOR EACH loop is executed over all checked CheckBoxes and the Value of each CheckBoxes are fetched and Text of associated Label elements are also fetched.
Finally, the Text and Value of all the checked CheckBoxes are displayed using JavaScript Alert Message Box.
@using Get_CheckBoxList_MVC.Models;
@model List<FruitModel>
 
@{
     Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
 
    <table id="tblFruits" border="0" cellpadding="0" cellspacing="0">
        @foreach (FruitModel model in Model)
        {
            <tr>
                <td>
                    @Html.CheckBoxFor(m => model.Selected, new { @id = model.Name, @value = model.FruitId })
                    @Html.Label(model.Name, new { @for = model.Name })
                </td>
            </tr>
        }
    </table>
    <br />
    <input type="button" id="btnGet" value="Get Selected Items" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                var checked_checkboxes = $("#tblFruits input[type=checkbox]:checked");
                var message = "";
                checked_checkboxes.each(function () {
                    var value = $(this).val();
                    var text = $(this).closest("tr").find("label").html();
                    message += "Text: " + text + " Value: " + value;
                    message += "\n";
                });
                alert(message);
            });
        });
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net MVC: Get Selected Text and Value of CheckBoxList using jQuery
 
 

Demo

View Demo
 
 

Downloads

Download Code