如何在Razor Pages中通过JavaScript获取复选框选中项的ID值

问题背景 #

Razor页面中表格每行的复选框对应项目ID，已实现单选逻辑（同一时间仅能选中一个复选框），点击保存按钮通过Ajax将选中ID传递给后端OnPostChangeProject方法，但调试时后端收到的是全零格式的Guid，无法正确获取项目ID。

错误原因 #

1. 元素ID重复：循环渲染表格行时，给每个<td>都设置了相同的id="CheckedProject"，HTML中ID需全局唯一，导致选择器无法精准定位选中的复选框。
2. 复选框未绑定项目ID：Html.CheckBoxFor生成的复选框默认值为true/false，没有关联对应项目的Guid，调用.val()无法获取正确的ID值。
3. Ajax参数不匹配：后端方法参数名为project，但前端传递的参数名是projectId，且设置了contentType: "application/json"却未将数据序列化为JSON格式，导致模型绑定失败。

修复步骤 #

1. 修正Razor页面的复选框渲染 #

移除重复的CheckedProject ID，给复选框添加自定义数据属性存储项目ID：

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <!-- 其他列保持不变 -->
            <td>
                @Html.CheckBoxFor(modelItem => item.IsActiveProject, new { data_project_id = item.Id })
            </td>
            <td></td>
        </tr>
    }
</tbody>

2. 调整单选逻辑的选择器 #

修改第一个脚本的复选框选择器，避免依赖重复ID：

// 获取表格内所有复选框
var checkboxes = document.querySelectorAll("table input[type=checkbox]");

checkboxes.forEach(function (checkbox) {
    checkbox.addEventListener("click", function () {
        // 取消所有复选框选中状态
        checkboxes.forEach(function (cb) {
            cb.checked = false;
        });
        // 选中当前点击的复选框
        this.checked = true;
    });
});

3. 修正选中ID的获取逻辑 #

在保存按钮的点击事件中，通过数据属性获取选中复选框对应的项目ID：

document.getElementById("saveButton").addEventListener("click", function () {
    // 获取选中的复选框，通过data属性拿到项目ID
    var selectedCheckbox = $("table input[type=checkbox]:checked");
    var selectedProjectId = selectedCheckbox.data("project-id");

    $.ajax({
        type: "POST",
        url: "/Index?handler=ChangeProject",
        // 参数名与后端方法保持一致，序列化为JSON字符串
        data: JSON.stringify({ project: selectedProjectId }),
        headers: {
            "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val()
        },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            location.reload();
        }
    });
});

4. 后端方法添加[FromBody]特性（推荐） #

由于前端传递的是JSON格式数据，给后端参数添加[FromBody]确保模型绑定正常：

public async Task<IActionResult> OnPostChangeProject([FromBody] Guid project)
{
    await projectSelector.SetActiveProject(project);
    return new JsonResult(new { success = true });
}

验证效果 #

完成上述修改后，点击保存按钮，后端即可正确获取选中复选框对应的项目Guid，不再出现全零值的情况。

内容的提问来源于stack exchange，提问作者LJsec