In this article I will explain with an example, how to get values of checked (selected) CheckBoxes using jQuery in ASP.Net Core Razor Pages.
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 class. It has all the properties needed for populating a CheckBoxList.
Razor PageModel (Code-Behind)
The PageModel consists of the following Handler method.
Handler method for handling GET operation
Inside this Handler 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.
Then generic list of SelectListItem class object is copied to public property Fruits which is used for populating CheckBoxList in .Net Core.
Finally, the list of Fruits is returned.
public class IndexModel : PageModel
{
public List<SelectListItem> Fruits { get; set; }
public void OnGet()
{
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" });
this.Fruits = items;
}
}
Razor Page (HTML)
Populating List of CheckBoxes
Inside the Razor Page, a loop is executed over the generic list of SelectListItem class which in turn generates a list containing HTML CheckBoxes and HTML Label elements.
Note: The CheckBoxes are grouped by keeping the Name attribute value constant for all CheckBoxes.
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.
@page
@model Razor_Get_CheckBoxList_Values_jQuery.Pages.IndexModel
@{
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.Fruits)
{
<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 Razor Pages: Get values of checked (selected) CheckBoxes using jQuery]()
Downloads
