如何使用 Flask WTForms 创建多选选项答案

【问题标题】：How to Use Flask WTForms to Create Multi-Select Option如何使用 Flask WTForms 创建多选选项
【发布时间】：2020-09-06 18:52:47
【问题描述】：

我想在我的网页上添加一个表单，让用户选择多个选项（不在下拉列表中）。例如，如果有 3 个可能的项目，则应列出如下：

 ITEM 1                           ITEM 2                    ITEM 3

它们应该在单独的“框”中，应该可以选择。我不想在下拉列表或列表视图中执行此操作。我有哪些选择？

【问题讨论】：

你想要复选框吗？
不，我没有。项目框本身应该是可点击的。

标签： python html flask flask-wtforms

【解决方案1】：

我想我会在样式中使用checkbox。您可以在 Flask/WTF 中执行此操作，但目标如下：

body {
  background: white;
  color: #323232;
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Helvetica neue, roboto;
}
input[type=checkbox] {
  display:none;
}

input[type=checkbox] + label {
  background: #ccc;
  font-style: italic;
  padding: 20px;
  cursor:pointer;
} 
input[type=checkbox]:checked + label {
  background: #f00;
  font-style: normal;
}

<div style="inline-block">
    <input type="checkbox" id="toggle" name="toggle" class="hideThis">
    <label for="toggle">Toggle</label>
</div>
<div style="inline-block">
    <input type="checkbox" id="toggle2" name="toggle2" class="hideThis">
    <label for="toggle2">Toggle</label>
</div>
<div style="inline-block">
    <input type="checkbox" id="toggle3" name="toggle3" class="hideThis">
    <label for="toggle3">Toggle</label>
</div>

【讨论】：

如何根据选择将页面重定向到不同的站点？比如如果有 3 个选项，选择 1,2 应该转到页面 A，选择 3 应该转到页面 B，等等。
您不需要表单来执行此操作。您只需将 onclick 处理程序添加到每个 div。但这是一个单独的问题。如果这回答了您的问题，您应该接受答案并在需要时提出单独的问题。