{"id":22065648,"url":"https://github.com/karenpayneoregon/razor-pages-checkboxes","last_synced_at":"2026-05-06T05:34:39.370Z","repository":{"id":165956986,"uuid":"640359035","full_name":"karenpayneoregon/razor-pages-checkboxes","owner":"karenpayneoregon","description":"Razor pages created checkboxes which are accessible using aria attributes ","archived":false,"fork":false,"pushed_at":"2023-05-16T10:41:11.000Z","size":1411,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T00:29:03.872Z","etag":null,"topics":["accessibility","asp-net-core","csharp","razor-pages","serilog"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/karenpayneoregon.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-13T20:27:52.000Z","updated_at":"2023-12-27T23:59:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"24478233-4566-4c7d-8d0e-30e193dfae63","html_url":"https://github.com/karenpayneoregon/razor-pages-checkboxes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karenpayneoregon%2Frazor-pages-checkboxes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karenpayneoregon%2Frazor-pages-checkboxes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karenpayneoregon%2Frazor-pages-checkboxes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karenpayneoregon%2Frazor-pages-checkboxes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/karenpayneoregon","download_url":"https://codeload.github.com/karenpayneoregon/razor-pages-checkboxes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245144978,"owners_count":20568056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","asp-net-core","csharp","razor-pages","serilog"],"created_at":"2024-11-30T19:21:04.443Z","updated_at":"2026-05-06T05:34:39.326Z","avatar_url":"https://github.com/karenpayneoregon.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ASP.NET Core/Razor pages working with Checkboxes\n\nThere are two lessons, how to create a list of checkboxes and also how to set aria-checked for each checkbox using JavaScript.\n\n\u003e **Note**\n\u003e aria-checked The aria-checked attribute indicates whether the element is checked (true), unchecked (false), or if the checked status is indeterminate (mixed), meaning it is neither checked nor unchecked.\n\n## Finished page\n\n![finish page showing list of checkboxes](assets/figure1.png)\n\n## Data\n\nIn code the following model is used to represent automobile parts with just enough properties for rendering checkboxes and on post have the primary key for each selected part selected by the visitor.\n\n```csharp\npublic class AutoPart\n{\n    public int Id { get; set; }\n    public string Name { get; set; }\n}\n```\n\n## Mocked data\n\nSo there are no external dependences e.g. a database, static data is used.\n\n```csharp\npublic class MockedData\n{\n    /// \u003csummary\u003e\n    /// For a real app data would come from a data source eg. database\n    /// \u003c/summary\u003e\n    public static List\u003cAutoPart\u003e PartsList() =\u003e\n        new()\n        {\n            new () { Id = 1, Name = \"Headlights\" },\n            new () { Id = 2, Name = \"Brake Light Switches\" },\n            new () {Id = 3, Name = \"Wiper Switches\" },\n            new () {Id = 4, Name = \"Door Jamb Switches\" }\n        };\n}\n```\n\n## Rendering data with checkboxes\n\n### Code behind\n\nUsing the following model, setup a list property.\n\n```csharp\npublic class ServiceModel\n{\n    public int Id { get; set; }\n    public string Name { get; set; }\n    public bool Checked { get; set; }\n    public override string ToString() =\u003e $\"{Id}  {Name}  {Checked}\";\n}\n```\n\nThe property\n\n```csharp\npublic class Index1Model : PageModel\n{\n    [BindProperty]\n    public List\u003cServiceModel\u003e CheckModels { get; set; }\n```\n\nNext, use the following method to populate CheckModels.\n\n```csharp\npublic Index1Model()\n{\n    LoadParts();\n}\n\nprivate void LoadParts()\n{\n    CheckModels = new List\u003cServiceModel\u003e();\n    foreach (var part in MockedData.PartsList())\n    {\n        CheckModels.Add(part.Id % 2 == 0\n            ? new ServiceModel() { Id = part.Id, Name = part.Name, Checked = true }\n            : new ServiceModel() { Id = part.Id, Name = part.Name });\n    }\n}\n```\n\n### Frontend code\n\n- @Html.HiddenFor keeps a reference to the identity for each part\n- @Html.CheckBoxFor\n    - An anonymous object for storing\n        - The part identifier\n        - form-check-input the Bootstrap class for rendering the checkbox, not this is also used in JavaScript below to provide dynamic toggling for aria-checked attribute\n        - Set the initial value for aria-checked\n        - Set the initial value for aria-label\n\n:stop_sign: **Important** \n\n- Note that setting an aria attribute use an underscore rather than a hyphen, Visual Studio will handle the conversion.\n- Some parts will be set to true while others to false, once the page has been rendered and a checkbox check state changes without the proper JavaScript the aria-checked property will not change.\n\n```csharp\n@for (var index = 0; index \u003c Model.CheckModels.Count(); index++)\n{\n\n    \u003cdiv class=\"row\"\u003e\n\n        \u003cdiv class=\"col-6 ms-3\"\u003e\n            @* note setting initial value of aria-checked using aria_checked*@\n            @Html.HiddenFor(item =\u003e @Model.CheckModels[index].Id)\n            @Html.CheckBoxFor(item =\u003e @Model.CheckModels[index].Checked,\n                new\n                {\n                    @id = @Model.CheckModels[index].Id,\n                    @class = \"form-check-input\",\n                    aria_checked = @Model.CheckModels[index].Checked.ToString().ToLower(),\n                    aria_label = @Model.CheckModels[index].Name,\n                })\n\n            \u003cinput type=\"hidden\" asp-for=\"@Model.CheckModels[index].Name\"/\u003e\n            \u003clabel class=\"form-check-label\"\n               for=\"@Model.CheckModels[index].Id\" aria-labelby=\"@Model.CheckModels[index].Id\"\u003e\n                 @Model.CheckModels[index].Name\n            \u003c/label\u003e\n\n        \u003c/div\u003e\n\n    \u003c/div\u003e\n\n}\n```\n\n### JavaScript\n\nThe following code assigns a click event for each checkbox, if the checkbox is set to true, aria-checked is set to true while when the checkbox is unchecked its aria-check is set to false.\n\n```javascript\nvar $checkboxHelper = $checkboxHelper || {};\n$checkboxHelper = function () {\n    var setupCheckboxesClickEvents = function (checkboxes) {\n        \n        for (let index = 0; index \u003c checkboxes.length; index++) {\n\n            checkboxes[index].onclick = function () {\n\n                if (checkboxes[index].getAttribute('aria-checked') === 'true') {\n                    checkboxes[index].setAttribute('aria-checked', 'false');\n                } else {\n                    checkboxes[index].setAttribute('aria-checked', 'true');\n                }\n            };\n        }\n    }\n\n    // for testing \n    var setCheckboxesAriaChecked = function (checkboxes) {\n\n        for (let index = 0; index \u003c checkboxes.length; index++) {\n            checkboxes[index].onclick = function () {\n                checkboxes[index].setAttribute('aria-checked', 'false');\n            };\n        }\n    }\n\n\n    return {\n        initialize: setupCheckboxesClickEvents,\n        setAriaCheckedFalse: setCheckboxesAriaChecked\n    };\n}();\n```\n\nThe following code run the method above in document load of the page\n\n```html\n\n@section Scripts\n    {\n    \u003cscript\u003e\n        document.addEventListener(\"DOMContentLoaded\", () =\u003e {\n            $checkboxHelper.initialize(document.getElementsByClassName(\"form-check-input\"));\n        });\n    \u003c/script\u003e\n}\n```\n\n### Watch aria-checked\n\nOpen developer tools in your browser and toggle a checkbox, below is with Chrome developer tools.\n\n![developer tools](assets/figure2.png)\n\n### On Post\n\nThe code asserts there are checked items and if so display them else write out none were checked.\n\n\n```csharp\npublic Task\u003cIActionResult\u003e OnPostResendAsync()\n{\n    var checkedItems = CheckModels.Where(x =\u003e x.Checked).ToList();\n\n    if (checkedItems.Any())\n    {\n        Log.Information(\"Checked items on Index1 post\");\n        foreach (var model in checkedItems)\n        {\n            Log.Information(\"Id: {Id} Name: {name}\", model.Id, model.Name);\n        }\n    }\n    else\n    {\n        Log.Information(\"Nothing check for index1 post\");\n    }\n\n\n    return Task.FromResult\u003cIActionResult\u003e(RedirectToPage(\"Index1\"));\n}\n```\n\n### Source code\n\nClone the following GitHub [repository](https://github.com/karenpayneoregon/razor-pages-checkboxes).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarenpayneoregon%2Frazor-pages-checkboxes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkarenpayneoregon%2Frazor-pages-checkboxes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarenpayneoregon%2Frazor-pages-checkboxes/lists"}