Django表单Checkbox提交值始终为False/None排查及解决方案

你这问题是三层bug叠出来的，和Django本身的复选框逻辑无关：

• 模板层错误：你给外层<div>标签加了name、id属性，这类属性只有在<input>/<select>/<textarea>这类原生表单元素上才会被表单识别提交，<div>写再多表单相关属性都不会被纳入请求参数。Django渲染{{form.report_ho_so_giu}}的时候本来就会自动生成带正确name="report_ho_so_giu"、id="id_report_ho_so_giu"的input标签，你在外层套的div完全是无效代码。
• 前端取值错误：你Ajax里用的选择器$('#ho_so_giu_text')在贴出的模板代码里根本不存在，取到的是其他无关元素，自然不管勾选与否都返回on。另外原生复选框不能用.val()获取选中状态，要读元素的checked属性。
• 视图层错误：你取cleaned_data的时候写的key是id_report_ho_so_giu，这不是你定义的字段名，你的字段名是report_ho_so_giu，写对key才不会报KeyError。另外你存数据库的时候直接传ho_so_giu=ho_so_giu，这个变量你根本没提前赋值，本身就会抛错。

补充原生复选框的默认逻辑：浏览器默认只会提交勾选状态的复选框，值固定为on，未勾选的复选框不会出现在请求参数里。Django的BooleanField(required=False)接不到对应参数时会自动返回False，这是框架的正常设计，不是bug。你之前勾选状态也接不到值，核心原因就是模板渲染的input没有正确的name属性，参数根本没被传到后端。

1. 修正模板代码 #

删掉复选框外层多余的、带错误name/id属性的div，直接渲染表单字段即可，不要在非表单元素上写表单属性：

<div class="form-group row">
    <div class="form-check">
        {{ form.report_ho_so_giu }}
        <label class="form-check-label" for="{{ form.report_ho_so_giu.auto_id }}">
            {{ form.report_ho_so_giu.label }}
        </label>
    </div>
</div>

你之前在字段widget里加的form-check-input类会被Django自动渲染到input标签上，不需要额外重复添加。

2. 修正前端Ajax逻辑 #

不要用不存在的选择器取值，复选框状态要通过checked属性判断，嫌麻烦可以直接序列化整个表单提交，不用单独取每个字段：

// 方式1：单独取复选框值，勾选返回true，未勾选返回false
const ho_so_giu = $('#id_report_ho_so_giu').prop('checked');

// 方式2：直接序列化整个表单，自动包含csrf token和所有字段值，不会漏参数
const formData = $('#form_save_report').serialize();
$.ajax({
    type: 'POST',
    url: window.location.href, // 替换成你的提交接口地址
    data: formData,
    success: function(res) {
        // 写你的提交成功逻辑
    }
})

注意：Django自动生成的表单字段id固定为id_字段名，所以这个复选框的id就是id_report_ho_so_giu，不要自定义错误id。

3. 修正视图层代码 #

写对cleaned_data的字段名，提前赋值要存到模型里的变量，补上表单校验失败的返回逻辑方便排查问题：

if request.method=='POST':
    form = AddReportForm(request.POST)
    if form.is_valid():
        so_hd = form.cleaned_data["report_so_hd"]
        # 正确取布尔字段值，不要写id开头的错误key
        ho_so_giu = form.cleaned_data["report_ho_so_giu"]
        
        daily_report = report(so_hd=so_hd, ho_so_giu=ho_so_giu)
        daily_report.save()
        return JsonResponse({
            "so_hd": so_hd,
            "ho_so_giu": ho_so_giu
        })
    # 表单校验失败时返回错误信息，方便定位问题
    return JsonResponse({"error": form.errors}, status=400)

改完之后，勾选复选框时后端会收到值on，Django自动转成True；未勾选时收不到对应参数，自动转成False，取值逻辑完全符合预期。

如果改完还是有兼容问题，可以用隐藏域存真实布尔值，完全规避原生复选框的提交特性：

<!-- 隐藏域存真实提交值，默认0代表未勾选，始终会被提交到后端 -->
<input type="hidden" name="report_ho_so_giu" id="report_ho_so_giu" value="0">
<!-- 仅做展示用的复选框，不参与表单提交 -->
<div class="form-check">
    <input type="checkbox" class="form-check-input" id="checkbox_display">
    <label class="form-check-label" for="checkbox_display">Hồ sơ giữ</label>
</div>

<script>
$('#checkbox_display').on('change', function(){
    // 点击展示复选框时，同步更新隐藏域的值
    $('#report_ho_so_giu').val($(this).prop('checked') ? 1 : 0);
})
</script>

后端接收到参数后，判断值是否为1就能拿到正确的布尔状态，不会出现参数缺失的问题，展示层的复选框也可以随意换成图标、按钮等自定义样式，灵活度更高。

内容的提问来源于stack exchange，提问作者Dinh Truong Anh Phuong