In this article I will explain with an example, how to get value of checked (selected) RadioButton 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 RadioButtonList.
 
 
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 RadioButtonList 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 RadioButtons
Inside the Razor Page, a loop is executed over the generic list of SelectListItem class which in turn generates a list containing HTML RadioButtons and HTML Label elements.
Note: The RadioButtons are grouped by keeping the Name attribute value constant for all RadioButtons.
 
Below the RadioButtons, there is a Submit Button.
 
Displaying checked (selected) value 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, first the reference of the RadioButton which is checked is determined.
The Text part is determined from the associated Label element is selected using this reference and its Text part is appended to a JavaScript variable message.
Finally, the selected Fruit name is displayed using JavaScript Alert Message Box.
@page
@model Get_RadioButtonList_Value_jQuery_Core_Razor.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="radio" 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 = "";
                var checkedRadio = $("#tblFruits input[type=radio]:checked");
                if (checkedRadio.length > 0) {
                    message += "Selected Fruit: ";
                    message += checkedRadio.parent().next().find("label").html();
                }
                alert(message);
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages: Get value of checked (selected) RadioButton using jQuery
 
 
Downloads
Download Code