如何在.cshtml表单中为多个复选框添加至少选1个的必填校验

这种需求完全可以在.cshtml中实现，建议同时做客户端+服务端双重校验，避免前端校验被绕过的风险。

1 修复原有代码的问题 #

你现有代码里的counter变量定义在for循环内部，每次循环都会被重置为0，统计选中数量的逻辑完全无效，这部分代码可以直接删除。

2 客户端校验（提交前实时拦截） #

给复选框加统一类名，绑定表单提交事件校验选中数量：

@using (Html.BeginForm("Data", "Controller", FormMethod.Post, new { id = "checkboxForm" }))
{
    for (int i = 0; i < Model.items.Count; i++)
    {
        @* 给所有复选框添加统一类名方便选中 *@
        @Html.CheckBoxFor(r => Model.items[i].IsSelected, new { @class = "group-checkbox" })
        <label>  @Model.items[i].te</label><br />

        @Html.HiddenFor(h => @Model.items[i].Id)
        @Html.HiddenFor(h => @Model.items[i].Name)
    }
    <span id="checkTip" style="color:red; display:none;">请至少选择一个选项</span><br/>
    <input id="Button" type="submit" value="Next" />
}

<script>
document.getElementById('checkboxForm').addEventListener('submit', function(e) {
    const checkedNum = document.querySelectorAll('.group-checkbox:checked').length;
    const tip = document.getElementById('checkTip');
    if (checkedNum < 1) {
        e.preventDefault(); // 阻止表单提交
        tip.style.display = 'inline';
        return false;
    }
    tip.style.display = 'none';
    return true;
})
</script>

3 服务端校验（兜底防绕过） #

前端校验可以被用户禁用JS绕过，必须在后端Action补充校验：

[HttpPost]
public ActionResult Data(你的Model类 model)
{
    // 校验选中数量
    if (model.items.Count(x => x.IsSelected) < 1)
    {
        ModelState.AddModelError("", "请至少选择一个选项");
        return View(model);
    }
    // 正常业务逻辑
    return RedirectToAction("下一页Action");
}

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