AJAX生成复选框数组提交服务器时部分勾选值丢失的问题

你当前给复选框设置的Columns[0]、Columns[1]这类带连续索引的命名方式，ASP.NET Core模型绑定会将其视为连续索引的数组。一旦中间某个复选框未勾选（不会提交值），索引序列就会中断，后端绑定器会忽略后续所有索引的提交值，导致只能拿到第一个未勾选项之前的已勾选值。

方法1：使用无索引的统一name（推荐） #

将所有复选框的name属性改为columns（与后端参数名一致），去掉索引后缀。这样每个被勾选的复选框都会以columns=值的形式提交，ASP.NET Core会自动将所有这些值收集到string[] columns参数中，不受未勾选项的影响。

修改后的HTML示例：

<div id="column-checkboxes" class="col-md-12">
  <div class="form-check form-switch">
    <input type="checkbox" class="form-check-input" value="Customer" id="Columns_0_" name="columns">
    <label class="form-check-label" for="Columns_0_">Customer</label>
  </div>
  <div class="form-check form-switch">
    <input type="checkbox" class="form-check-input" value="Origin" id="Columns_1_" name="columns">
    <label class="form-check-label" for="Columns_1_">Origin</label>
  </div>
  <!-- 其余复选框均按此修改name属性 -->
</div>

后端代码无需改动：

public async Task<IActionResult> OnPostAsync(int id, string[] columns){}

方法2：添加隐藏字段补全索引（繁琐，不推荐） #

如果必须保留索引式命名，可以在每个复选框后添加对应索引的隐藏字段，当复选框未勾选时，提交空值以维持索引连续性：

<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" value="Customer" id="Columns_0_" name="Columns[0]">
  <input type="hidden" name="Columns[0]" value="">
  <label class="form-check-label" for="Columns_0_">Customer</label>
</div>

这种方法需要为每个复选框配置隐藏字段，维护成本较高，仅在特殊场景下使用。

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