为何复选框数据未随POST请求发送？技术问题排查

你的核心问题是复选框没有设置name属性——HTML表单控件必须通过name属性标识自身，否则浏览器提交表单时不会将其值纳入请求数据中。

修正后的表单代码 #

<form action="select" method="POST">

<div class="form-check">
    <input class="form-check-input" type="checkbox" name="subjects" value="{{ subject.id }}" id="flexCheckDefault{{ subject.grouper }}{{ subject.id }}" >
    <label class="form-check-label" for="flexCheckDefault{{ subject.grouper }}{{ subject.id }}">
        {{ subject.name }}
    </label>
</div>

<button type="submit" class="btn btn-sm btn-primary  pull-left"><i class="fa fa-check"></i> Save</button>

</form>

关键说明 #

1. 给复选框添加name="subjects"：如果是多个同类型复选框，建议保持name一致，后端可通过request.POST.getlist('subjects')获取所有选中的id值
2. 顺带修正了label的for属性：原代码中label的for值与input的id不匹配，会导致点击标签无法选中复选框，现在改为与input的id完全一致

为什么name属性是必须的？ #

浏览器组装表单请求数据时，是以name=value的键值对形式打包的。没有name属性的控件，浏览器无法为其生成对应的键，自然不会把它的值发送给后端，这就是你只看到csrfmiddlewaretoken的原因。

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