如何通过jQuery在页面加载时获取Checkbox值并修正提交异常

问题根源 #

你的代码存在两个核心问题：

1. 视图里重复编写if-else逻辑手动控制复选框状态，不仅冗余还容易出错。
2. 现有jQuery代码逻辑错误：func2里重复定义变量、循环中this指向window而非当前复选框，导致页面加载时无法正确初始化value；同时依赖手动修改value的方式不可靠——ASP.NET Core默认仅在复选框勾选时提交值，未勾选则不提交，后台模型会自动赋值默认值0，但你的逻辑没覆盖这种场景。

最优解决方案 #

1. 简化视图代码（自动绑定状态）

不用写if-else，直接用ASP.NET Core的asp-for标签助手自动绑定复选框状态，同时添加hidden字段确保未勾选时提交0值：

<div class="row mb-2">
    <div>
        <div class="col-md-1" style='align-content:center;'>
            <!-- 复选框设置value为1，勾选时提交该值 -->
            <input type="checkbox" class="largerCheckbox" asp-for="Is_Prefix_Checked" value="1" />
            <!-- hidden字段设置value为0，未勾选时提交该值 -->
            <input type="hidden" asp-for="Is_Prefix_Checked" value="0" />
        </div>
    </div>
    
    <label class="col-sm-2 col-form-label">Prefix</label>
    <div class="col-sm-3">
        <select asp-for="EmployeePrefix" class="form-control" asp-items="@ViewBag.prefix"></select>
        <span asp-validation-for="EmployeePrefix" class="text-danger"></span>
    </div>
</div>

ASP.NET Core会根据Model.Is_Prefix_Checked的值自动设置复选框的checked属性，无需手动编写条件判断。

2. 移除冗余jQuery代码

上述视图方案已解决提交值问题，不需要再用JS手动修改value。直接删掉所有相关的jQuery代码，包括window.onload和点击事件处理逻辑。

3. 后台模型匹配

确保模型中对应属性类型正确，示例如下：

public class YourModel
{
    public int Is_Prefix_Checked { get; set; }
    public string EmployeePrefix { get; set; }
    // 其他属性...
}

批量处理20+复选框 #

对页面上的20多个复选框，只需重复上述视图结构：每个复选框对应一个hidden字段，用asp-for绑定对应的模型属性即可，ASP.NET Core会自动处理所有绑定逻辑，无需额外编写批量JS代码。

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