多个同名checkbox未勾选时如何传值？Django后端获取未勾选项为0的方法

问题原因 #

浏览器默认不会提交未勾选的checkbox控件，因此你直接用相同name属性提交时，后端request.POST.getlist('need_a')只能收集到被勾选的项，自然无法对应到原有顺序生成带0的列表。

解决方案 #

方案1：隐藏域兜底（无需写JS，适配动态新增场景） #

给每一个checkbox前面追加一个同name的隐藏域，固定值为0，后端按规则处理返回的列表即可：
前端代码调整：

<!-- 每个checkbox都搭配前置同name隐藏域，动态新增时也遵循这个结构 -->
<input name="need_a" type="hidden" value="0">
<input name="need_a" type="checkbox" class="custom-control-input" value="1" {% if some_condition %}checked{% endif %}/>

<input name="need_a" type="hidden" value="0">
<input name="need_a" type="checkbox" class="custom-control-input " value="1" {% if some_condition %}checked{% endif %}/>

<input name="need_a" type="hidden" value="0">
<input name="need_a" type="checkbox" class="custom-control-input" value="1" {% if some_condition %}checked{% endif %}/>

后端处理代码：

raw_list = request.POST.getlist('need_a')
# 按步长2取每组的第二个值，就是对应checkbox的真实状态
result = [int(raw_list[i]) for i in range(1, len(raw_list), 2)]

处理后得到的result就是你需要的[1,0,0]格式的列表。

方案2：带索引的name属性（逻辑更清晰，无额外解析成本） #

渲染和动态新增checkbox时，给name加上索引后缀，同时单独提交当前checkbox的总数量：
前端代码调整：

<!-- 总数量隐藏域，动态新增时同步更新value值 -->
<input type="hidden" name="need_a_total" value="3">
<input name="need_a_0" type="checkbox" class="custom-control-input" value="1" {% if some_condition %}checked{% endif %}/>
<input name="need_a_1" type="checkbox" class="custom-control-input " value="1" {% if some_condition %}checked{% endif %}/>
<input name="need_a_2" type="checkbox" class="custom-control-input" value="1" {% if some_condition %}checked{% endif %}/>

后端处理代码：

total = int(request.POST.get('need_a_total', 0))
result = []
for i in range(total):
    val = int(request.POST.get(f'need_a_{i}', '0'))
    result.append(val)

方案3：JS预处理提交内容 #

表单提交前遍历所有need_a的checkbox，把状态拼成数组转成JSON字符串放到单独的隐藏域提交，后端直接解析JSON即可：
前端代码示例：

<input type="hidden" name="need_a_list" id="need_a_list">
<form id="your_form">
<!-- 原有checkbox代码不用修改 -->
<input name="need_a" type="checkbox" class="custom-control-input" value="1" {% if some_condition %}checked{% endif %}/>
<input name="need_a" type="checkbox" class="custom-control-input " value="1" {% if some_condition %}checked{% endif %}/>
<input name="need_a" type="checkbox" class="custom-control-input" value="1" {% if some_condition %}checked{% endif %}/>
<button type="submit">提交</button>
</form>

<script>
document.getElementById('your_form').addEventListener('submit', function() {
  const checks = document.querySelectorAll('input[name="need_a"]');
  const list = Array.from(checks).map(item => item.checked ? 1 : 0);
  document.getElementById('need_a_list').value = JSON.stringify(list);
})
</script>

后端处理代码：

import json
result = json.loads(request.POST.get('need_a_list', '[]'))

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