Bootstrap Switch关闭状态下无法传递属性的问题求助

这是表单开发里很常见的小坑，我来帮你捋清楚问题原因和解决办法～

问题根源 #

HTML的复选框（checkbox）有个默认行为：只有当它被选中时，才会把对应的name和value提交到服务器。当开关处于OFF状态（未选中）时，这个字段根本不会出现在表单提交的数据里，所以你用formdata['test1']去取值时，Flask就会抛出KeyError。

解决方案 #

这里有两种常用的处理方式，你可以根据自己的需求选择：

方法1：前端添加隐藏输入字段（推荐） #

在每个switch复选框旁边，添加一个同名的隐藏输入框，设置好未选中时的默认值。这样不管开关是否选中，服务器都能拿到对应的字段值——选中时复选框的value会覆盖隐藏字段的value，未选中时就提交隐藏字段的默认值。

修改你的前端代码如下：

<form action="/test2" method="POST">
  <div class="form-check form-switch">
    <!-- 隐藏字段：未选中时提交false -->
    <input type="hidden" name="test1" value="false">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" value="true" name="test1">
    <label class="form-check-label" for="flexSwitchCheckDefault">Test 1</label>
  </div>
  <div class="form-check form-switch">
    <!-- 隐藏字段：未选中时提交off -->
    <input type="hidden" name="test2" value="off">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" value="on" name="test2">
    <label class="form-check-label" for="flexSwitchCheckChecked">Test 2</label>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

方法2：后端做兼容处理 #

如果不想修改前端代码，可以在Flask里使用get()方法获取表单值，当字段不存在时返回默认值：

修改你的后端代码：

@app.post('/test2')
def test2():
    formdata = flask.request.form
    print(formdata)
    # 用get方法，字段不存在时返回默认值"false"
    test1_value = formdata.get('test1', 'false')
    # 对于test2，也可以用类似方式，或者判断字段是否存在来判断是否选中
    test2_value = formdata.get('test2', 'off')
    # 或者用存在性判断：is_test2_checked = 'test2' in formdata
    print(test1_value, test2_value)
    return "success", 200

补充说明 #

Bootstrap Switch只是给原生checkbox加了样式，它本质还是遵循HTML复选框的提交规则，所以核心问题还是原生HTML的表单行为～

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